Add feature to upgrade old documents #1111

Author: Polleps

browser/.gitignore

@@ -34,3 +34,7 @@ data-browser/coverage
 **/tomic-svelte-**.tgz
 **/tomic-cli-**.tgz
 **/tomic-create-template-**.tgz
+
+data-browser/src/locales/.wuchale
+data-browser/src/locales/data.js
+

browser/data-browser/package.json

@@ -35,6 +35,7 @@
     "@tiptap/extension-list": "^3.7.2",
     "@tiptap/extension-mention": "^3.7.2",
     "@tiptap/extension-placeholder": "^3.7.2",
+    "@tiptap/extension-table": "^3.10.5",
     "@tiptap/extension-text-align": "^3.7.2",
     "@tiptap/extension-text-style": "^3.7.2",
     "@tiptap/extension-typography": "^3.7.2",
@@ -47,8 +48,8 @@
     "@tomic/react": "workspace:*",
     "@uiw/codemirror-theme-github": "^4.24.1",
     "@uiw/react-codemirror": "^4.24.1",
-    "@wuchale/jsx": "^0.7.4",
-    "@wuchale/vite-plugin": "^0.14.6",
+    "@wuchale/jsx": "^0.9.4",
+    "@wuchale/vite-plugin": "^0.15.3",
     "ai": "^5.0.29",
     "clsx": "^2.1.1",
     "downshift": "^9.0.9",
@@ -75,7 +76,7 @@
     "styled-components": "^6.1.19",
     "stylis": "4.3.0",
     "tiptap-markdown": "^0.8.10",
-    "wuchale": "^0.16.5",
+    "wuchale": "^0.18.3",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.27",
     "zod": "^4.1.5"

browser/data-browser/src/chunks/RTE/AsyncMarkdownEditor.tsx

@@ -4,13 +4,14 @@ import { StarterKit } from '@tiptap/starter-kit';
 import { Link } from '@tiptap/extension-link';
 import { Placeholder } from '@tiptap/extension-placeholder';
 import { Typography } from '@tiptap/extension-typography';
-import { Markdown } from 'tiptap-markdown';
+import { Markdown } from '@tiptap/markdown';
 import { EditorEvents } from './EditorEvents';
 import { FaCode } from 'react-icons/fa6';
 import { useCallback, useState } from 'react';
 import { BubbleMenu } from './BubbleMenu';
 import { TiptapContextProvider } from './TiptapContext';
 import { SlashCommands, buildSuggestion } from './SlashMenu/CommandsExtension';
+import { TableKit } from '@tiptap/extension-table';
 import { ExtendedImage } from './ImagePicker';
 import { usePopoverContainer } from '../../components/Popover';
 import {
@@ -19,6 +20,7 @@ import {
   FloatingMenuText,
   FloatingCodeButton,
 } from './sharedEditorStyles';
+import { TaskItem, TaskList } from '@tiptap/extension-list';
 
 export type AsyncMarkdownEditorProps = {
   placeholder?: string;
@@ -49,8 +51,13 @@ export default function AsyncMarkdownEditor({
     StarterKit.configure({
       link: false,
     }),
-    Markdown,
+    Markdown.configure({
+      markedOptions: {
+        gfm: true,
+      },
+    }),
     Typography,
+    TableKit,
     Link.configure({
       protocols: [
         'http',
@@ -67,6 +74,10 @@ export default function AsyncMarkdownEditor({
         target: '_blank',
       },
     }),
+    TaskList,
+    TaskItem.configure({
+      nested: true,
+    }),
     ExtendedImage.configure({
       HTMLAttributes: {
         class: 'tiptap-image',
@@ -86,6 +97,7 @@ export default function AsyncMarkdownEditor({
   const editor = useEditor({
     extensions,
     content: markdown,
+    contentType: 'markdown',
     onBlur,
     autofocus: !!autoFocus,
     editorProps: {
@@ -98,12 +110,11 @@ export default function AsyncMarkdownEditor({
   });
 
   const handleChange = useCallback(() => {
-    // @ts-expect-error - markdown is a valid storage
-    const value = editor.storage.markdown.getMarkdown();
+    const value = editor.getMarkdown();
 
     setMarkdown(value);
     onChange?.(value);
-  }, [onChange]);
+  }, [onChange, editor]);
 
   const handleRawChange = useCallback(
     (val: string) => {
@@ -117,7 +128,7 @@ export default function AsyncMarkdownEditor({
     setCodeMode(enable);
 
     if (!enable) {
-      editor?.commands.setContent(markdown);
+      editor?.commands.setContent(markdown, { contentType: 'markdown' });
     }
   };
 

browser/data-browser/src/chunks/RTE/getCollaborativeEditorSchema.ts

@@ -0,0 +1,90 @@
+import { getSchema, type Extensions } from '@tiptap/core';
+import { Link } from '@tiptap/extension-link';
+import { TaskList, TaskItem } from '@tiptap/extension-list';
+import TextAlign from '@tiptap/extension-text-align';
+import {
+  TextStyle,
+  Color,
+  BackgroundColor,
+} from '@tiptap/extension-text-style';
+import Typography from '@tiptap/extension-typography';
+import StarterKit from '@tiptap/starter-kit';
+import { type Store } from '@tomic/react';
+import {
+  ResourceNode,
+  ResourceNodeInline,
+} from './ResourceExtension/ResourceNode';
+import Image from '@tiptap/extension-image';
+import type { Schema } from '@tiptap/pm/model';
+
+export function getCollaborativeEditorSchema(store: Store): {
+  schema: Schema;
+  extensions: Extensions;
+} {
+  const extensions = [
+    StarterKit.configure({
+      undoRedo: false,
+      link: false,
+    }),
+    Typography,
+    Link.extend({
+      parseHTML: () => [
+        {
+          tag: 'a[href]',
+          getAttrs: node => {
+            // Links with a data-type are custom nodes that should be ignored by the link extension
+            if (node.getAttribute('data-type')) {
+              return false;
+            }
+
+            // Default link parsing
+            return {
+              href: node.getAttribute('href'),
+              target: node.getAttribute('target'),
+            };
+          },
+        },
+      ],
+    }).configure({
+      autolink: true,
+      openOnClick: true,
+      protocols: [
+        'http',
+        'https',
+        'mailto',
+        {
+          scheme: 'tel',
+          optionalSlashes: true,
+        },
+      ],
+      HTMLAttributes: {
+        class: 'tiptap-link',
+        rel: 'noopener noreferrer',
+        target: '_blank',
+      },
+    }),
+    Image.configure({
+      HTMLAttributes: {
+        class: 'tiptap-image',
+      },
+    }),
+    ResourceNode.configure({
+      store,
+    }),
+    ResourceNodeInline.configure({
+      store,
+    }),
+    TextAlign.configure({
+      types: ['heading', 'paragraph'],
+    }),
+    TaskList,
+    TaskItem.configure({
+      nested: true,
+    }),
+    TextStyle,
+    Color,
+    BackgroundColor,
+  ];
+
+  return { schema: getSchema(extensions), extensions };
+}

browser/data-browser/src/chunks/RTE/sharedEditorStyles.ts

@@ -31,6 +31,15 @@ export const StyledEditorWrapper = styled(EditorWrapperBase)`
   & .tiptap {
     width: min(100%, 75ch);
     min-height: ${MIN_EDITOR_HEIGHT};
+
+    table {
+      border-collapse: collapse;
+      td,
+      th {
+        border: 1px solid ${p => p.theme.colors.bg2};
+        padding: ${p => p.theme.size(2)};
+      }
+    }
   }
 `;
 

browser/data-browser/src/components/LocaleContext.tsx

@@ -1,13 +1,14 @@
 import { useLocalStorage } from '@hooks/useLocalStorage';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { loadLocale } from 'wuchale/load-utils';
+import { useOnValueChange } from '@helpers/useOnValueChange';
 
-interface LocaleContext {
+interface LocaleContextType {
   locale: string;
   setLocale: (locale: string) => void;
 }
 
-const LocaleContext = createContext<LocaleContext>({
+const LocaleContext = createContext<LocaleContextType>({
   locale: 'en',
   setLocale: () => {},
 });
@@ -21,8 +22,11 @@ export const LocaleProvider = ({ children }: React.PropsWithChildren) => {
   );
   const [localeLoaded, setLocaleLoaded] = useState(false);
 
-  useEffect(() => {
+  useOnValueChange(() => {
     setLocaleLoaded(false);
+  }, [locale]);
+
+  useEffect(() => {
     loadLocale(locale).then(() => setLocaleLoaded(true));
   }, [locale]);