chore: allow directly setting tiptap options instead of immediate wat…

…cher

components/Workspace/Note/Editor/NoteEditor.vue

@@ -17,6 +17,8 @@ const props = defineProps<{
   onRefresh: () => Promise<void>
 }>();
 
+const content = computed(() => props.note.content || '');
+
 const { shortcuts } = useAppConfig();
 const mitt = useMitt();
 const zeenk = useZeenk();
@@ -26,20 +28,9 @@ const {
   editor,
   isTyping,
   onUpdate: onContentUpdate,
-} = useTiptap();
-
-let hasUnsavedChanges = false;
-function updateContent(force?: boolean) {
-  const content = editor.getHTML();
-
-  return props
-    .onUpdate(content || '', force)
-    .then(() => {
-      hasUnsavedChanges = false;
-    });
-}
+} = useTiptap({ content: content.value, editable: props.editable });
 
-watch(() => props.note.content, (content) => {
+watch(content, (content) => {
   if (isTyping.value || !editor) {
     return;
   }
@@ -49,14 +40,11 @@ watch(() => props.note.content, (content) => {
   if (editorContent !== content) {
     editor.commands.setContent(content || '');
   }
-}, {
-  immediate: import.meta.client,
-  deep: true, // this is really weird, but it only triggers watcher with deep: true ?
 });
 
 watch(() => props.editable, (editable) => {
   editor.setOptions({ editable });
-}, { immediate: import.meta.client });
+});
 
 watch(spellcheck, (spellcheck) => {
   editor.setOptions({
@@ -93,6 +81,17 @@ zeenk.on('update-note', ({ path, steps }) => {
   editor.view.dispatch(tr);
 });
 
+let hasUnsavedChanges = false;
+function updateContent(force?: boolean) {
+  const content = editor.getHTML();
+
+  return props
+    .onUpdate(content || '', force)
+    .then(() => {
+      hasUnsavedChanges = false;
+    });
+}
+
 function saveUnsavedChanges() {
   if (hasUnsavedChanges) {
     updateContent(true);

composables/tiptap/index.ts

@@ -34,14 +34,15 @@ const isTyping = /* #__PURE__ */ ref(false); // this will be removed in server b
 
 const debouncedClearTyping = debounce(() => isTyping.value = false, 500);
 
-function initTiptap() {
+function initTiptap(opts?: { content?: string, editable?: boolean }) {
   if (import.meta.server) {
     return;
   }
 
   return new Editor({
     autofocus: false,
-    editable: true,
+    editable: opts?.editable,
+    content: opts?.content,
     editorProps: {
       attributes: {
         spellcheck: getSetting(settings.spellcheck).value === 'yes' ? 'true' : 'false',
@@ -97,8 +98,8 @@ function initTiptap() {
   });
 }
 
-export function useTiptap() {
-  const editor = initTiptap()!;
+export function useTiptap(opts?: { content?: string, editable?: boolean }) {
+  const editor = initTiptap(opts)!;
 
   currentTiptap.value = editor;