UBERF-8240 Add editor extension for editable state change tracking (#6693)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>

plugins/text-editor-resources/src/components/extension/codeblock.ts

@@ -21,6 +21,7 @@ import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { Plugin, PluginKey } from '@tiptap/pm/state'
 import { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view'
 import { common, createLowlight } from 'lowlight'
+import { isChangeEditable } from './editable'
 
 type Lowlight = ReturnType<typeof createLowlight>
 
@@ -117,7 +118,7 @@ export function LanguageSelector (options: CodeBlockLowlightOptions): Plugin {
         return createDecorations(state.doc, options)
       },
       apply (tr, prev) {
-        if (tr.docChanged) {
+        if (tr.docChanged || isChangeEditable(tr)) {
           return createDecorations(tr.doc, options)
         }
 

plugins/text-editor-resources/src/components/extension/editable.ts

@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core'
+import { type Transaction } from '@tiptap/pm/state'
+
+const metaKey = '$editable'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface EditableOptions {}
+
+export interface EditableStorage {
+  isEditable: boolean | undefined
+}
+
+export function isChangeEditable (tr: Transaction): boolean {
+  return tr.getMeta(metaKey) !== undefined
+}
+
+export const EditableExtension = Extension.create<EditableOptions, EditableStorage>({
+  name: 'editable',
+
+  addStorage () {
+    return { isEditable: undefined }
+  },
+
+  onUpdate () {
+    if (this.editor.isEditable !== this.storage.isEditable) {
+      const { state, view } = this.editor
+
+      this.storage.isEditable = this.editor.isEditable
+      const tr = state.tr.setMeta(metaKey, this.storage.isEditable)
+      view.dispatch(tr)
+    }
+  }
+})

plugins/text-editor-resources/src/components/extension/focus.ts

@@ -22,6 +22,7 @@ export interface FocusStorage {
 }
 
 export const FocusExtension = Extension.create<FocusOptions, FocusStorage>({
+  name: 'focus',
   addStorage () {
     return { canBlur: true }
   },

plugins/text-editor-resources/src/components/extension/submit.ts

@@ -6,6 +6,7 @@ export interface SubmitOptions {
 }
 
 export const SubmitExtension = Extension.create<SubmitOptions>({
+  name: 'submit',
   addKeyboardShortcuts () {
     const shortcuts: Record<string, KeyboardShortcutCommand> = {
       Space: () => {

plugins/text-editor-resources/src/kits/editor-kit.ts

@@ -23,6 +23,7 @@ import ListKeymap from '@tiptap/extension-list-keymap'
 import TableHeader from '@tiptap/extension-table-header'
 import 'prosemirror-codemark/dist/codemark.css'
 
+import { EditableExtension } from '../components/extension/editable'
 import { CodeBlockHighlighExtension, codeBlockHighlightOptions } from '../components/extension/codeblock'
 import { NoteExtension, type NoteOptions } from '../components/extension/note'
 import { FileExtension, type FileOptions } from '../components/extension/fileExt'
@@ -172,6 +173,7 @@ async function buildEditorKit (): Promise<Extension<EditorKitOptions, any>> {
                     }
                   })
                 ],
+                [110, EditableExtension],
                 [200, CodeBlockHighlighExtension.configure(codeBlockHighlightOptions)],
                 [210, CodeExtension.configure(codeOptions)],
                 [220, HardBreakExtension.configure({ shortcuts: mode })]