features and bug fixes (#322)

* fix page import title bug * fix youtube embed in markdown export * add link to rendered file html * fix: markdown callout import * update local generateJSON * feat: switch spaces from sidebar * remove unused package * feat: editor date menu command * fix date description * update default locale code * feat: add more code highlight languages
2025-11-16 07:01:11 +10:00 · 2024-09-17 15:40:49 +01:00
parent fb27282886
commit 6a3a7721be
20 changed files with 296 additions and 234 deletions
--- a/apps/client/package.json
+++ b/apps/client/package.json
@ -41,7 +41,6 @@
    "react-drawio": "^0.2.0",
    "react-error-boundary": "^4.0.13",
    "react-helmet-async": "^2.0.5",
-    "react-moveable": "^0.56.0",
    "react-router-dom": "^6.26.1",
    "socket.io-client": "^4.7.5",
    "tippy.js": "^6.3.7",
--- a/apps/client/src/features/editor/components/code-block/code-block-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
@ -49,7 +49,7 @@ export default function CodeBlockView(props: NodeViewProps) {
        <Select
          placeholder="auto"
          checkIconPosition="right"
-          data={extension.options.lowlight.listLanguages()}
+          data={extension.options.lowlight.listLanguages().sort()}
          value={languageValue}
          onChange={changeLanguage}
          searchable
--- a/apps/client/src/features/editor/components/slash-menu/menu-items.ts
+++ b/apps/client/src/features/editor/components/slash-menu/menu-items.ts
@ -16,7 +16,8 @@ import {
  IconPhoto,
  IconTable,
  IconTypography,
-  IconMenu4
+  IconMenu4,
+  IconCalendar,
 } from "@tabler/icons-react";
 import {
  CommandProps,
@ -330,6 +331,26 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      command: ({ editor, range }: CommandProps) =>
        editor.chain().focus().deleteRange(range).setExcalidraw().run(),
    },
+    {
+      title: "Date",
+      description: "Insert current date",
+      searchTerms: ["date", "today"],
+      icon: IconCalendar,
+      command: ({ editor, range }: CommandProps) => {
+        const currentDate = new Date().toLocaleDateString("en-US", {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        });
+
+        return editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent(currentDate)
+          .run();
+      },
+    },
  ],
 };

--- a/apps/client/src/features/editor/extensions/extensions.ts
+++ b/apps/client/src/features/editor/extensions/extensions.ts
@ -54,9 +54,26 @@ import CodeBlockView from "@/features/editor/components/code-block/code-block-vi
 import DrawioView from "../components/drawio/drawio-view";
 import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
 import plaintext from "highlight.js/lib/languages/plaintext";
+import powershell from "highlight.js/lib/languages/powershell";
+import elixir from "highlight.js/lib/languages/elixir";
+import erlang from "highlight.js/lib/languages/erlang";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import clojure from "highlight.js/lib/languages/clojure";
+import fortran from "highlight.js/lib/languages/fortran";
+import haskell from "highlight.js/lib/languages/haskell";
+import scala from "highlight.js/lib/languages/scala";

 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
+lowlight.register("powershell", powershell);
+lowlight.register("powershell", powershell);
+lowlight.register("erlang", erlang);
+lowlight.register("elixir", elixir);
+lowlight.register("dockerfile", dockerfile);
+lowlight.register("clojure", clojure);
+lowlight.register("fortran", fortran);
+lowlight.register("haskell", haskell);
+lowlight.register("scala", scala);

 export const mainExtensions = [
  StarterKit.configure({
--- a/apps/client/src/features/space/components/sidebar/space-name.module.css
+++ b/apps/client/src/features/space/components/sidebar/space-name.module.css
@ -1,6 +0,0 @@
-.spaceName {
-    display: block;
-    width: 100%;
-    padding: var(--mantine-spacing-sm);
-    color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
-  }
--- a/apps/client/src/features/space/components/sidebar/space-name.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-name.tsx
@ -1,19 +0,0 @@
-import { UnstyledButton, Group, Text } from "@mantine/core";
-import classes from "./space-name.module.css";
-
-interface SpaceNameProps {
-  spaceName: string;
-}
-export function SpaceName({ spaceName }: SpaceNameProps) {
-  return (
-    <UnstyledButton className={classes.spaceName}>
-      <Group>
-        <div style={{ flex: 1 }}>
-          <Text size="md" fw={500} lineClamp={1}>
-            {spaceName}
-          </Text>
-        </div>
-      </Group>
-    </UnstyledButton>
-  );
-}
--- a/apps/client/src/features/space/components/sidebar/space-select.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-select.tsx
@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { useDebouncedValue } from '@mantine/hooks';
+import { Avatar, Group, Select, SelectProps, Text } from '@mantine/core';
+import { useGetSpacesQuery } from '@/features/space/queries/space-query.ts';
+import { ISpace } from '../../types/space.types';
+
+interface SpaceSelectProps {
+  onChange: (value: string) => void;
+  value?: string;
+  label?: string;
+}
+
+const renderSelectOption: SelectProps['renderOption'] = ({ option }) => (
+  <Group gap="sm">
+    <Avatar color="initials" variant="filled" name={option.label} size={20} />
+    <div>
+      <Text size="sm">{option.label}</Text>
+    </div>
+  </Group>
+);
+
+export function SpaceSelect({ onChange, label, value }: SpaceSelectProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const [debouncedQuery] = useDebouncedValue(searchValue, 500);
+  const { data: spaces, isLoading } = useGetSpacesQuery({
+    query: debouncedQuery,
+    limit: 50,
+  });
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    if (spaces) {
+      const spaceData = spaces?.items
+        .filter((space: ISpace) => space.slug !== value)
+        .map((space: ISpace) => {
+          return {
+            label: space.name,
+            value: space.slug,
+          };
+        });
+
+      const filteredSpaceData = spaceData.filter(
+        (user) =>
+          !data.find((existingUser) => existingUser.value === user.value)
+      );
+      setData((prevData) => [...prevData, ...filteredSpaceData]);
+    }
+  }, [spaces]);
+
+  return (
+    <Select
+      data={data}
+      renderOption={renderSelectOption}
+      maxDropdownHeight={300}
+      //label={label || 'Select space'}
+      placeholder="Search for spaces"
+      searchable
+      searchValue={searchValue}
+      onSearchChange={setSearchValue}
+      clearable
+      variant="filled"
+      onChange={onChange}
+      nothingFoundMessage="No space found"
+      limit={50}
+      checkIconPosition="right"
+      comboboxProps={{ width: 300, withinPortal: false }}
+      dropdownOpened
+    />
+  );
+}
--- a/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+++ b/apps/client/src/features/space/components/sidebar/space-sidebar.tsx
@ -5,8 +5,8 @@ import {
  Text,
  Tooltip,
  UnstyledButton,
-} from "@mantine/core";
-import { spotlight } from "@mantine/spotlight";
+} from '@mantine/core';
+import { spotlight } from '@mantine/spotlight';
 import {
  IconArrowDown,
  IconDots,
@ -14,27 +14,27 @@ import {
  IconPlus,
  IconSearch,
  IconSettings,
-} from "@tabler/icons-react";
+} from '@tabler/icons-react';

-import classes from "./space-sidebar.module.css";
-import React, { useMemo } from "react";
-import { useAtom } from "jotai";
-import { SearchSpotlight } from "@/features/search/search-spotlight.tsx";
-import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
-import { Link, useLocation, useParams } from "react-router-dom";
-import clsx from "clsx";
-import { useDisclosure } from "@mantine/hooks";
-import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
-import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { SpaceName } from "@/features/space/components/sidebar/space-name.tsx";
-import { getSpaceUrl } from "@/lib/config.ts";
-import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
+import classes from './space-sidebar.module.css';
+import React, { useMemo } from 'react';
+import { useAtom } from 'jotai';
+import { SearchSpotlight } from '@/features/search/search-spotlight.tsx';
+import { treeApiAtom } from '@/features/page/tree/atoms/tree-api-atom.ts';
+import { Link, useLocation, useParams } from 'react-router-dom';
+import clsx from 'clsx';
+import { useDisclosure } from '@mantine/hooks';
+import SpaceSettingsModal from '@/features/space/components/settings-modal.tsx';
+import { useGetSpaceBySlugQuery } from '@/features/space/queries/space-query.ts';
+import { getSpaceUrl } from '@/lib/config.ts';
+import SpaceTree from '@/features/page/tree/components/space-tree.tsx';
+import { useSpaceAbility } from '@/features/space/permissions/use-space-ability.ts';
 import {
  SpaceCaslAction,
  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
-import PageImportModal from "@/features/page/components/page-import-modal.tsx";
+} from '@/features/space/permissions/permissions.type.ts';
+import PageImportModal from '@/features/page/components/page-import-modal.tsx';
+import { SwitchSpace } from './switch-space';

 export function SpaceSidebar() {
  const [tree] = useAtom(treeApiAtom);
@ -52,7 +52,7 @@ export function SpaceSidebar() {
  }

  function handleCreatePage() {
-    tree?.create({ parentId: null, type: "internal", index: 0 });
+    tree?.create({ parentId: null, type: 'internal', index: 0 });
  }

  return (
@ -61,11 +61,12 @@ export function SpaceSidebar() {
        <div
          className={classes.section}
          style={{
-            border: "none",
-            marginBottom: "0",
+            border: 'none',
+            marginTop: 2,
+            marginBottom: 3,
          }}
        >
-          <SpaceName spaceName={space?.name} />
+          <SwitchSpace spaceName={space?.name} spaceSlug={space?.slug} />
        </div>

        <div className={classes.section}>
@ -77,7 +78,7 @@ export function SpaceSidebar() {
                classes.menu,
                location.pathname.toLowerCase() === getSpaceUrl(spaceSlug)
                  ? classes.activeButton
-                  : "",
+                  : ''
              )}
            >
              <div className={classes.menuItemInner}>
@ -114,7 +115,7 @@ export function SpaceSidebar() {

            {spaceAbility.can(
              SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page,
+              SpaceCaslSubject.Page
            ) && (
              <UnstyledButton
                className={classes.menu}
@ -141,7 +142,7 @@ export function SpaceSidebar() {

            {spaceAbility.can(
              SpaceCaslAction.Manage,
-              SpaceCaslSubject.Page,
+              SpaceCaslSubject.Page
            ) && (
              <Group gap="xs">
                <SpaceMenu spaceId={space.id} onSpaceSettings={openSettings} />
@ -165,7 +166,7 @@ export function SpaceSidebar() {
              spaceId={space.id}
              readOnly={spaceAbility.cannot(
                SpaceCaslAction.Manage,
-                SpaceCaslSubject.Page,
+                SpaceCaslSubject.Page
              )}
            />
          </div>
--- a/apps/client/src/features/space/components/sidebar/switch-space.module.css
+++ b/apps/client/src/features/space/components/sidebar/switch-space.module.css
@ -0,0 +1,5 @@
+.spaceName {
+  width: 100%;
+  padding: var(--mantine-spacing-sm);
+  color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-dark-0));
+}
--- a/apps/client/src/features/space/components/sidebar/switch-space.tsx
+++ b/apps/client/src/features/space/components/sidebar/switch-space.tsx
@ -0,0 +1,62 @@
+import classes from './switch-space.module.css';
+import { useNavigate } from 'react-router-dom';
+import { SpaceSelect } from './space-select';
+import { getSpaceUrl } from '@/lib/config';
+import { Avatar, Button, Popover, Text } from '@mantine/core';
+import { IconChevronDown } from '@tabler/icons-react';
+import { useDisclosure } from '@mantine/hooks';
+
+interface SwitchSpaceProps {
+  spaceName: string;
+  spaceSlug: string;
+}
+
+export function SwitchSpace({ spaceName, spaceSlug }: SwitchSpaceProps) {
+  const [opened, { close, open, toggle }] = useDisclosure(false);
+  const navigate = useNavigate();
+
+  const handleSelect = (value: string) => {
+    if (value) {
+      navigate(getSpaceUrl(value));
+      close();
+    }
+  };
+
+  return (
+    <Popover
+      width={300}
+      position="bottom"
+      withArrow
+      shadow="md"
+      opened={opened}
+    >
+      <Popover.Target>
+        <Button
+          variant="subtle"
+          fullWidth
+          justify="space-between"
+          rightSection={<IconChevronDown size={18} />}
+          color="gray"
+          onClick={toggle}
+        >
+          <Avatar
+            size={20}
+            color="initials"
+            variant="filled"
+            name={spaceName}
+          />
+          <Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
+            {spaceName}
+          </Text>
+        </Button>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <SpaceSelect
+          label={spaceName}
+          value={spaceSlug}
+          onChange={handleSelect}
+        />
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
--- a/apps/client/src/features/space/queries/space-query.ts
+++ b/apps/client/src/features/space/queries/space-query.ts
@ -20,18 +20,16 @@ import {
  removeSpaceMember,
  createSpace,
  updateSpace,
-  deleteSpace,
 } from '@/features/space/services/space-service.ts';
 import { notifications } from '@mantine/notifications';
-import { IPagination } from '@/lib/types.ts';
+import { IPagination, QueryParams } from '@/lib/types.ts';

-export function useGetSpacesQuery(): UseQueryResult<
-  IPagination<ISpace>,
-  Error
-> {
+export function useGetSpacesQuery(
+  params?: QueryParams
+): UseQueryResult<IPagination<ISpace>, Error> {
  return useQuery({
-    queryKey: ['spaces'],
-    queryFn: () => getSpaces(),
+    queryKey: ['spaces', params],
+    queryFn: () => getSpaces(params),
  });
 }

--- a/apps/client/src/features/space/services/space-service.ts
+++ b/apps/client/src/features/space/services/space-service.ts
@ -4,12 +4,12 @@ import {
  IChangeSpaceMemberRole,
  IRemoveSpaceMember,
  ISpace,
-} from '@/features/space/types/space.types';
-import { IPagination } from '@/lib/types.ts';
-import { IUser } from '@/features/user/types/user.types.ts';
+} from "@/features/space/types/space.types";
+import { IPagination, QueryParams } from "@/lib/types.ts";
+import { IUser } from "@/features/user/types/user.types.ts";

-export async function getSpaces(): Promise<IPagination<ISpace>> {
-  const req = await api.post('/spaces');
+export async function getSpaces(params?: QueryParams): Promise<IPagination<ISpace>> {
+  const req = await api.post("/spaces", params);
  return req.data;
 }

--- a/apps/server/src/common/helpers/prosemirror/html/generateJSON.ts
+++ b/apps/server/src/common/helpers/prosemirror/html/generateJSON.ts
@ -1,7 +1,9 @@
 import { Extensions, getSchema } from '@tiptap/core';
 import { DOMParser, ParseOptions } from '@tiptap/pm/model';
-import { Window, DOMParser as HappyDomParser } from 'happy-dom';
+import { Window } from 'happy-dom';

+// this function does not work as intended
+// it has issues with closing tags
 export function generateJSON(
  html: string,
  extensions: Extensions,
@ -10,8 +12,10 @@ export function generateJSON(
  const schema = getSchema(extensions);

  const window = new Window();
-  const dom = new HappyDomParser().parseFromString(html, 'text/html').body;
+  const document = window.document;
+  document.body.innerHTML = html;

-  // @ts-ignore
-  return DOMParser.fromSchema(schema).parse(dom, options).toJSON();
+  return DOMParser.fromSchema(schema)
+    .parse(document as never, options)
+    .toJSON();
 }
--- a/apps/server/src/database/repos/user/user.repo.ts
+++ b/apps/server/src/database/repos/user/user.repo.ts
@ -102,7 +102,7 @@ export class UserRepo {
      name: insertableUser.name || insertableUser.email.toLowerCase(),
      email: insertableUser.email.toLowerCase(),
      password: await hashPassword(insertableUser.password),
-      locale: 'en',
+      locale: 'en-US',
      role: insertableUser?.role,
      lastLoginAt: new Date(),
    };
--- a/apps/server/src/integrations/export/turndown-utils.ts
+++ b/apps/server/src/integrations/export/turndown-utils.ts
@ -22,6 +22,7 @@ export function turndown(html: string): string {
    listParagraph,
    mathInline,
    mathBlock,
+    iframeEmbed,
  ]);
  return turndownService.turndown(html).replaceAll('<br>', ' ');
 }
@ -120,3 +121,15 @@ function mathBlock(turndownService: TurndownService) {
    },
  });
 }
+
+function iframeEmbed(turndownService: TurndownService) {
+  turndownService.addRule('iframeEmbed', {
+    filter: function (node: HTMLInputElement) {
+      return node.nodeName === 'IFRAME';
+    },
+    replacement: function (content: any, node: HTMLInputElement) {
+      const src = node.getAttribute('src');
+      return '[' + src + '](' + src + ')';
+    },
+  });
+}
--- a/apps/server/src/integrations/import/import.service.ts
+++ b/apps/server/src/integrations/import/import.service.ts
@ -32,8 +32,10 @@ export class ImportService {
  ): Promise<void> {
    const file = await filePromise;
    const fileBuffer = await file.toBuffer();
-    const fileName = sanitize(file.filename).slice(0, 255).split('.')[0];
    const fileExtension = path.extname(file.filename).toLowerCase();
+    const fileName = sanitize(
+      path.basename(file.filename, fileExtension).slice(0, 255),
+    );
    const fileContent = fileBuffer.toString();

    let prosemirrorState = null;
--- a/apps/server/src/integrations/import/utils/callout.marked.ts
+++ b/apps/server/src/integrations/import/utils/callout.marked.ts
@ -0,0 +1,41 @@
+import { Token, marked } from 'marked';
+
+interface CalloutToken {
+  type: 'callout';
+  calloutType: string;
+  text: string;
+  raw: string;
+}
+
+export const calloutExtension = {
+  name: 'callout',
+  level: 'block',
+  start(src: string) {
+    return src.match(/:::/)?.index ?? -1;
+  },
+  tokenizer(src: string): CalloutToken | undefined {
+    const rule = /^:::([a-zA-Z0-9]+)\s+([\s\S]+?):::/;
+    const match = rule.exec(src);
+
+    const validCalloutTypes = ['info', 'success', 'warning', 'danger'];
+
+    if (match) {
+      let type = match[1];
+      if (!validCalloutTypes.includes(type)) {
+        type = 'info';
+      }
+      return {
+        type: 'callout',
+        calloutType: type,
+        raw: match[0],
+        text: match[2].trim(),
+      };
+    }
+  },
+  renderer(token: Token) {
+    const calloutToken = token as CalloutToken;
+    const body = marked.parse(calloutToken.text);
+
+    return `<div data-type="callout" data-callout-type="${calloutToken.calloutType}">${body}</div>`;
+  },
+};
--- a/apps/server/src/integrations/import/utils/marked.utils.ts
+++ b/apps/server/src/integrations/import/utils/marked.utils.ts
@ -1,4 +1,5 @@
 import { marked } from 'marked';
+import { calloutExtension } from './callout.marked';

 marked.use({
  renderer: {
@ -25,6 +26,8 @@ marked.use({
  },
 });

+marked.use({ extensions: [calloutExtension] });
+
 export async function markdownToHtml(markdownInput: string): Promise<string> {
  const YAML_FONT_MATTER_REGEX = /^\s*---[\s\S]*?---\s*/;