v0.2.2

fix media visibility in firefox

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

apps/client/src/components/layouts/global/top-menu.tsx

@@ -1,5 +1,6 @@
-import { Avatar, Group, Menu, rem, UnstyledButton, Text } from "@mantine/core";
+import { Group, Menu, UnstyledButton, Text } from "@mantine/core";
 import {
+  IconBrush,
   IconChevronDown,
   IconLogout,
   IconSettings,
@@ -38,10 +39,7 @@ export default function TopMenu() {
             <Text fw={500} size="sm" lh={1} mr={3}>
               {workspace.name}
             </Text>
-            <IconChevronDown
+            <IconChevronDown size={16} />
-              style={{ width: rem(12), height: rem(12) }}
-              stroke={1.5}
-            />
           </Group>
         </UnstyledButton>
       </Menu.Target>
@@ -51,12 +49,7 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.WORKSPACE.GENERAL}
-          leftSection={
+          leftSection={<IconSettings size={16} />}
-            <IconSettings
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
         >
           Workspace settings
         </Menu.Item>
@@ -64,12 +57,7 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.WORKSPACE.MEMBERS}
-          leftSection={
+          leftSection={<IconUsers size={16} />}
-            <IconUsers
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
         >
           Manage members
         </Menu.Item>
@@ -98,27 +86,22 @@ export default function TopMenu() {
         <Menu.Item
           component={Link}
           to={APP_ROUTE.SETTINGS.ACCOUNT.PROFILE}
-          leftSection={
+          leftSection={<IconUserCircle size={16} />}
-            <IconUserCircle
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
         >
           My profile
         </Menu.Item>
 
+        <Menu.Item
+          component={Link}
+          to={APP_ROUTE.SETTINGS.ACCOUNT.PREFERENCES}
+          leftSection={<IconBrush size={16} />}
+        >
+          My preferences
+        </Menu.Item>
+
         <Menu.Divider />
 
-        <Menu.Item
+        <Menu.Item onClick={logout} leftSection={<IconLogout size={16} />}>
-          onClick={logout}
-          leftSection={
-            <IconLogout
-              style={{ width: rem(16), height: rem(16) }}
-              stroke={1.5}
-            />
-          }
-        >
           Logout
         </Menu.Item>
       </Menu.Dropdown>

apps/client/src/features/editor/components/image/image-view.tsx

@@ -2,32 +2,28 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { Image } from "@mantine/core";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function ImageView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align, title } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
+  const alignClass = useMemo(() => {
-    if (align === "center") return "center";
+    if (align === "left") return "alignLeft";
-    if (align === "right") return "flex-end";
+    if (align === "right") return "alignRight";
-    return "flex-start";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
+    <NodeViewWrapper>
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
       <Image
         radius="md"
         fit="contain"
         w={width}
         src={getFileUrl(src)}
         alt={title}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -264,10 +264,20 @@ export const getSuggestionItems = ({
   const search = query.toLowerCase();
   const filteredGroups: SlashMenuGroupedItemsType = {};
 
+  const fuzzyMatch = (query, target) => {
+    let queryIndex = 0;
+    target = target.toLowerCase();
+    for (let char of target) {
+      if (query[queryIndex] === char) queryIndex++;
+      if (queryIndex === query.length) return true;
+    }
+    return false;
+  };
+
   for (const [group, items] of Object.entries(CommandGroups)) {
     const filteredItems = items.filter((item) => {
       return (
-        item.title.toLowerCase().includes(search) ||
+        fuzzyMatch(search, item.title) ||
         item.description.toLowerCase().includes(search) ||
         (item.searchTerms &&
           item.searchTerms.some((term: string) => term.includes(search)))

apps/client/src/features/editor/components/video/video-view.tsx

@@ -1,31 +1,27 @@
 import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
+import clsx from "clsx";
 
 export default function VideoView(props: NodeViewProps) {
   const { node, selected } = props;
   const { src, width, align } = node.attrs;
 
-  const flexJustifyContent = useMemo(() => {
+  const alignClass = useMemo(() => {
-    if (align === "center") return "center";
+    if (align === "left") return "alignLeft";
-    if (align === "right") return "flex-end";
+    if (align === "right") return "alignRight";
-    return "flex-start";
+    if (align === "center") return "alignCenter";
+    return "alignCenter";
   }, [align]);
 
   return (
-    <NodeViewWrapper
+    <NodeViewWrapper>
-      style={{
-        position: "relative",
-        display: "flex",
-        justifyContent: flexJustifyContent,
-      }}
-    >
       <video
         preload="metadata"
         width={width}
         controls
         src={getFileUrl(src)}
-        className={selected ? "ProseMirror-selectednode" : ""}
+        className={clsx(selected ? "ProseMirror-selectednode" : "", alignClass)}
       />
     </NodeViewWrapper>
   );

apps/client/src/features/editor/full-editor.tsx

@@ -2,6 +2,9 @@ import classes from "@/features/editor/styles/editor.module.css";
 import React from "react";
 import { TitleEditor } from "@/features/editor/title-editor";
 import PageEditor from "@/features/editor/page-editor";
+import { Container } from "@mantine/core";
+import { useAtom } from "jotai/index";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -21,8 +24,16 @@ export function FullEditor({
   spaceSlug,
   editable,
 }: FullEditorProps) {
+  const [user] = useAtom(userAtom);
+  const fullPageWidth = user.settings?.preferences?.fullPageWidth;
+
   return (
-    <div className={classes.editor}>
+    <Container
+      fluid={fullPageWidth}
+      {...(fullPageWidth && { mx: 80 })}
+      size={850}
+      className={classes.editor}
+    >
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}
@@ -31,6 +42,6 @@ export function FullEditor({
         editable={editable}
       />
       <MemoizedPageEditor pageId={pageId} editable={editable} />
-    </div>
+    </Container>
   );
 }

apps/client/src/features/editor/styles/core.css

@@ -125,6 +125,21 @@
     cursor: ew-resize;
     cursor: col-resize;
   }
+
+  .alignLeft {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  .alignRight {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  .alignCenter {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 .ProseMirror-icon {

apps/client/src/features/editor/styles/editor.module.css

@@ -1,5 +1,4 @@
 .editor {
-    max-width: 800px;
     height: 100%;
     padding: 8px 20px;
     margin: 64px auto;

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -1,5 +1,6 @@
-import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import { ActionIcon, Group, Menu, Tooltip } from "@mantine/core";
 import {
+  IconArrowsHorizontal,
   IconDots,
   IconHistory,
   IconLink,
@@ -19,6 +20,7 @@ import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
 import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -95,6 +97,13 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
           Copy link
         </Menu.Item>
         <Menu.Divider />
+
+        <Menu.Item leftSection={<IconArrowsHorizontal size={16} stroke={2} />}>
+          <Group wrap="nowrap">
+            <PageWidthToggle label="Full width" />
+          </Group>
+        </Menu.Item>
+
         <Menu.Item
           leftSection={<IconHistory size={16} stroke={2} />}
           onClick={openHistoryModal}

apps/client/src/features/user/atoms/current-user-atom.ts

@@ -1,5 +1,16 @@
 import { atomWithStorage } from "jotai/utils";
 
 import { ICurrentUser } from "@/features/user/types/user.types";
+import { focusAtom } from "jotai-optics";
 
-export const currentUserAtom = atomWithStorage<ICurrentUser | null>("currentUser", null);
+export const currentUserAtom = atomWithStorage<ICurrentUser | null>(
+  "currentUser",
+  null,
+);
+
+export const userAtom = focusAtom(currentUserAtom, (optic) =>
+  optic.prop("user"),
+);
+export const workspaceAtom = focusAtom(currentUserAtom, (optic) =>
+  optic.prop("workspace"),
+);

apps/client/src/features/user/components/page-width-pref.tsx

@@ -0,0 +1,49 @@
+import { Group, Text, Switch, MantineSize } from "@mantine/core";
+import { useAtom } from "jotai/index";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { updateUser } from "@/features/user/services/user-service.ts";
+import React, { useState } from "react";
+
+export default function PageWidthPref() {
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">Full page width</Text>
+        <Text size="sm" c="dimmed">
+          Choose your preferred page width.
+        </Text>
+      </div>
+
+      <PageWidthToggle />
+    </Group>
+  );
+}
+
+interface PageWidthToggleProps {
+  size?: MantineSize;
+  label?: string;
+}
+export function PageWidthToggle({ size, label }: PageWidthToggleProps) {
+  const [user, setUser] = useAtom(userAtom);
+  const [checked, setChecked] = useState(
+    user.settings?.preferences?.fullPageWidth,
+  );
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    const updatedUser = await updateUser({ fullPageWidth: value });
+    setChecked(value);
+    setUser(updatedUser);
+  };
+
+  return (
+    <Switch
+      size={size}
+      label={label}
+      labelPosition="left"
+      defaultChecked={checked}
+      onChange={handleChange}
+      aria-label="Toggle full page width"
+    />
+  );
+}

apps/client/src/features/user/types/user.types.ts

@@ -7,7 +7,7 @@ export interface IUser {
   emailVerifiedAt: Date;
   avatarUrl: string;
   timezone: string;
-  settings: any;
+  settings: IUserSettings;
   invitedById: string;
   lastLoginAt: string;
   lastActiveAt: Date;
@@ -17,9 +17,16 @@ export interface IUser {
   workspaceId: string;
   deactivatedAt: Date;
   deletedAt: Date;
+  fullPageWidth: boolean; // used for update
 }
 
 export interface ICurrentUser {
   user: IUser;
   workspace: IWorkspace;
 }
+
+export interface IUserSettings {
+  preferences: {
+    fullPageWidth: boolean;
+  };
+}

apps/client/src/pages/settings/account/account-preferences.tsx

@@ -1,11 +1,15 @@
 import SettingsTitle from "@/components/settings/settings-title.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
+import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
+import { Divider } from "@mantine/core";
 
 export default function AccountPreferences() {
   return (
     <>
       <SettingsTitle title="Preferences" />
       <AccountTheme />
+      <Divider my={"md"} />
+      <PageWidthPref />
     </>
   );
 }

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "",
   "author": "",
   "private": true,

apps/server/src/core/user/dto/update-user.dto.ts

@@ -1,6 +1,6 @@
 import { OmitType, PartialType } from '@nestjs/mapped-types';
 import { CreateUserDto } from '../../auth/dto/create-user.dto';
-import { IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsOptional, IsString } from 'class-validator';
 
 export class UpdateUserDto extends PartialType(
   OmitType(CreateUserDto, ['password'] as const),
@@ -8,4 +8,8 @@ export class UpdateUserDto extends PartialType(
   @IsOptional()
   @IsString()
   avatarUrl: string;
+
+  @IsOptional()
+  @IsBoolean()
+  fullPageWidth: boolean;
 }

apps/server/src/core/user/user.service.ts

@@ -20,10 +20,19 @@ export class UserService {
     workspaceId: string,
   ) {
     const user = await this.userRepo.findById(userId, workspaceId);
+
     if (!user) {
       throw new NotFoundException('User not found');
     }
 
+    // preference update
+    if (typeof updateUserDto.fullPageWidth !== 'undefined') {
+      return this.updateUserPageWidthPreference(
+        userId,
+        updateUserDto.fullPageWidth,
+      );
+    }
+
     if (updateUserDto.name) {
       user.name = updateUserDto.name;
     }
@@ -42,4 +51,12 @@ export class UserService {
     await this.userRepo.updateUser(updateUserDto, userId, workspaceId);
     return user;
   }
+
+  async updateUserPageWidthPreference(userId: string, fullPageWidth: boolean) {
+    return this.userRepo.updatePreference(
+      userId,
+      'fullPageWidth',
+      fullPageWidth,
+    );
+  }
 }

apps/server/src/database/repos/user/user.repo.ts

@@ -15,6 +15,7 @@ import {
   executeWithPagination,
   PaginationResult,
 } from '@docmost/db/pagination/pagination';
+import { sql } from 'kysely';
 
 @Injectable()
 export class UserRepo {
@@ -157,6 +158,24 @@ export class UserRepo {
     return result;
   }
 
+  async updatePreference(
+    userId: string,
+    prefKey: string,
+    prefValue: string | boolean,
+  ) {
+    return await this.db
+      .updateTable('users')
+      .set({
+        settings: sql`COALESCE(settings, '{}'::jsonb)
+                || jsonb_build_object('preferences', COALESCE(settings->'preferences', '{}'::jsonb) 
+                || jsonb_build_object('${sql.raw(prefKey)}', ${sql.lit(prefValue)}))`,
+        updatedAt: new Date(),
+      })
+      .where('id', '=', userId)
+      .returning(this.baseFields)
+      .executeTakeFirst();
+  }
+
   /*
   async getSpaceIds(
     workspaceId: string,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docmost",
   "homepage": "https://docmost.com",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "build": "nx run-many -t build",