@humandialog/forms.svelte 1.1.7 → 1.2.1

package/components/document/editor.svelte

@@ -0,0 +1,546 @@
+<script>import { onMount, onDestroy, getContext } from "svelte";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+import Heading from "@tiptap/extension-heading";
+import Blockquote from "@tiptap/extension-blockquote";
+import HardBreak from "@tiptap/extension-hard-break";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Bold from "@tiptap/extension-bold";
+import Code from "@tiptap/extension-code";
+import Italic from "@tiptap/extension-italic";
+import Strike from "@tiptap/extension-strike";
+import Dropcursor from "@tiptap/extension-dropcursor";
+import Gapcursor from "@tiptap/extension-gapcursor";
+import History from "@tiptap/extension-history";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../../stores.js";
+import { informModification, pushChanges } from "../../updates.js";
+import { isDeviceSmallerThan, parseWidthDirective } from "../../utils.js";
+import Palette from "./internal/palette.svelte";
+import { FaFont, FaRemoveFormat, FaCode, FaComment, FaQuoteRight, FaExclamationTriangle, FaInfo } from "svelte-icons/fa";
+import IcH1 from "./internal/h1.icon.svelte";
+import IcH2 from "./internal/h2.icon.svelte";
+import IcH3 from "./internal/h3.icon.svelte";
+import IcH4 from "./internal/h4.icon.svelte";
+import { Extension } from "@tiptap/core";
+import { Suggestion } from "./internal/suggestion";
+export let value = "";
+export let placeholder = "";
+export let self = null;
+export let a = "";
+export let context = "";
+export let typename = "";
+export let compact = false;
+export let onFocusCb = void 0;
+export let onBlurCb = void 0;
+export let c = "";
+export let pushChangesImmediately = true;
+let onFinishEditing = void 0;
+export function run(onStop = void 0) {
+  onFinishEditing = onStop;
+  editor.commands.focus();
+}
+export function getFormattingOperations(withCaptions = false) {
+  let result = [];
+  commands.forEach((c2) => {
+    result.push({
+      caption: withCaptions ? c2.caption : "",
+      icon: c2.icon,
+      action: c2.on_choice
+    });
+  });
+  return result;
+}
+let item = null;
+let changedValue = "";
+let hasChangedValue = false;
+let additional_class = $$restProps["class"] ?? "";
+let ctx = context ? context : getContext("ctx");
+let cs = parseWidthDirective(c);
+let appearance_class;
+if (compact)
+  appearance_class = "";
+else
+  appearance_class = `bg-stone-50 border border-stone-300 rounded-md 
+                            dark:bg-stone-700 dark:border-stone-600 
+                            px-2.5`;
+let last_tick = -1;
+$: {
+  if (last_tick < $data_tick_store) {
+    if (hasChangedValue)
+      saveData();
+    else
+      setupSource();
+  }
+}
+function setupSource() {
+  last_tick = $data_tick_store;
+  if (a) {
+    if (self)
+      item = self;
+    else
+      item = $contextItemsStore[ctx];
+    if (!typename)
+      typename = $contextTypesStore[ctx];
+    if (item != null)
+      value = item[a];
+  }
+  if (!value)
+    value = "<p></p>";
+  hasChangedValue = false;
+}
+const PalletePlugin = Extension.create({
+  name: "palette",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        decorationTag: "span",
+        decorationClass: "suggestion",
+        startOfLine: false,
+        allowSpaces: false,
+        //prefixSpace: false,
+        allowedPrefixes: null,
+        command: ({ editor: editor2, range, props }) => {
+          props.command({ editor: editor2, range });
+        }
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion
+      })
+    ];
+  }
+});
+const suggestion = {
+  items: ({ query }) => {
+  },
+  render: () => {
+    return {
+      onStart: (props) => {
+        if (!props.clientRect) {
+          return;
+        }
+        show_command_palette();
+        palette.set_current_editor_range(props.range);
+        palette.filter("");
+      },
+      onUpdate(props) {
+        if (is_command_palette_visible) {
+          palette.set_current_editor_range(props.range);
+          palette.filter(props.query);
+        }
+      },
+      onKeyDown(props) {
+        if (is_command_palette_visible) {
+          palette.set_current_editor_range(props.range);
+          switch (props.event.key) {
+            case "Escape":
+              palette.hide();
+              return true;
+            case "ArrowUp":
+              palette.navigate_up();
+              return true;
+            case "ArrowDown":
+              palette.navigate_down();
+              return true;
+            case "Enter":
+              palette.execute_selected_command();
+              return true;
+          }
+        }
+        return false;
+      },
+      onExit() {
+        if (is_command_palette_visible)
+          palette.hide();
+      }
+    };
+  }
+};
+let editorElement;
+let editor;
+const codeBlockClass = "ml-6 text-sm font-mono break-normal text-pink-700 dark:text-pink-600";
+const CodeBlock = Paragraph.extend({
+  name: "CodeBlock",
+  priority: 999,
+  addAttributes() {
+    return {
+      class: {
+        default: codeBlockClass
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", { class: codeBlockClass }, 0];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "p",
+        getAttrs: (node) => node.className === codeBlockClass && null,
+        priority: 51
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setAsCode: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  }
+});
+const commentBlockClass = "ml-6 text-sm italic text-lime-700 dark:text-lime-600";
+const CommentBlock = Paragraph.extend({
+  name: "CommentBlock",
+  priority: 999,
+  addAttributes() {
+    return {
+      class: {
+        default: commentBlockClass
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", { class: commentBlockClass }, 0];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "p",
+        getAttrs: (node) => node.className === commentBlockClass && null,
+        priority: 51
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setAsComment: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  }
+});
+const warnBlockClass = "ml-6 px-3 py-1 border-l-2 rounded-md border-orange-500 bg-orange-100 dark:bg-orange-900";
+const WarningBlock = Paragraph.extend({
+  name: "WarningBlock",
+  priority: 999,
+  addAttributes() {
+    return {
+      class: {
+        default: warnBlockClass
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", { class: warnBlockClass }, 0];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "p",
+        getAttrs: (node) => node.className === warnBlockClass && null,
+        priority: 51
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setAsWarning: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  }
+});
+const infoBlockClass = "ml-6 px-3 py-1 border-l-2 rounded-md border-blue-500 bg-blue-100 dark:bg-blue-900";
+const InfoBlock = Paragraph.extend({
+  name: "InfoBlock",
+  priority: 999,
+  addAttributes() {
+    return {
+      class: {
+        default: infoBlockClass
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", { class: infoBlockClass }, 0];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "p",
+        getAttrs: (node) => node.className === infoBlockClass && null,
+        priority: 51
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setAsInfo: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  }
+});
+const QuoteBlock = Paragraph.extend({
+  name: "QuoteBlock",
+  priority: 998,
+  renderHTML({ HTMLAttributes }) {
+    return ["blockquote", HTMLAttributes, 0];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "blockquote",
+        priority: 51
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setAsQuote: () => ({ commands: commands2 }) => {
+        return commands2.setNode(this.name);
+      }
+    };
+  }
+});
+onMount(() => {
+  editor = new Editor({
+    editorProps: {
+      attributes: {
+        class: `${cs} ${appearance_class} prose prose-base sm:prose-base dark:prose-invert ${additional_class} overflow-y-auto whitespace-pre-wrap focus:outline-none`
+      }
+    },
+    element: editorElement,
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Heading.configure({
+        levels: [1, 2]
+      }),
+      HardBreak,
+      HorizontalRule,
+      // custom
+      CodeBlock,
+      CommentBlock,
+      WarningBlock,
+      InfoBlock,
+      QuoteBlock,
+      Bold,
+      Code,
+      Italic,
+      Strike,
+      Dropcursor,
+      Gapcursor,
+      History,
+      PalletePlugin.configure({
+        suggestion
+      })
+    ],
+    content: value,
+    injectCSS: false,
+    onTransaction({ editor: editor2, transaction }) {
+      hasChangedValue = true;
+      changedValue = editor2.getHTML();
+    },
+    onFocus({ editor: editor2, event }) {
+      if (onFocusCb)
+        onFocusCb();
+    },
+    onBlur({ editor: editor2, event }) {
+      on_blur();
+      if (onBlurCb)
+        onBlurCb();
+    },
+    onContentError({ editor: editor2, error, disableCollaboration }) {
+      console.log("editor content error:", error);
+    }
+  });
+});
+onDestroy(() => {
+  if (editor) {
+    editor.destroy();
+  }
+  if (is_command_palette_visible)
+    palette.hide();
+});
+function on_blur() {
+  if (onFinishEditing) {
+    onFinishEditing();
+    onFinishEditing = void 0;
+  }
+  if (saveData()) {
+    last_tick = $data_tick_store + 1;
+    $data_tick_store = last_tick;
+  }
+}
+export function save() {
+  if (saveData()) {
+    last_tick = $data_tick_store + 1;
+    $data_tick_store = last_tick;
+  }
+}
+function saveData() {
+  if (item && a && hasChangedValue) {
+    item[a] = changedValue;
+    hasChangedValue = false;
+    if (typename)
+      informModification(item, a, typename);
+    else
+      informModification(item, a);
+    if (pushChangesImmediately)
+      pushChanges();
+    return true;
+  }
+  return false;
+}
+let palette = null;
+let is_command_palette_visible = false;
+function get_selection_bbox() {
+  const selection = window.getSelection();
+  const range = selection.getRangeAt(0);
+  const rect = range.getBoundingClientRect();
+  return rect;
+}
+function get_window_box() {
+  let client_rect = new DOMRect();
+  client_rect.x = 0;
+  client_rect.y = 0;
+  client_rect.width = window.innerWidth;
+  client_rect.height = window.innerHeight;
+  return client_rect;
+}
+function on_palette_mouse_click() {
+}
+function on_palette_shown() {
+  is_command_palette_visible = true;
+}
+function on_palette_hidden() {
+  is_command_palette_visible = false;
+}
+function show_command_palette() {
+  let rect = get_selection_bbox();
+  let client_rect = get_window_box();
+  let top_space = rect.y;
+  let bottom_space = client_rect.height - (rect.y + rect.height);
+  palette.max_height_px = 500;
+  palette.width_px = 400;
+  let preferred_palette_height = palette.max_height_px;
+  let preferred_palette_width = palette.width_px;
+  let x = 0, y = 0;
+  let show_above = false;
+  let show_fullscreen = false;
+  if (client_rect.width < preferred_palette_width)
+    show_fullscreen = true;
+  else if (rect.x + preferred_palette_width > client_rect.width)
+    x = client_rect.width - preferred_palette_width;
+  else
+    x = rect.x;
+  if (client_rect.height < preferred_palette_height)
+    show_fullscreen = true;
+  else if (bottom_space >= preferred_palette_height)
+    y = rect.y + rect.height;
+  else if (top_space >= preferred_palette_height) {
+    y = rect.y;
+    show_above = true;
+  } else if (rect.x > preferred_palette_width) {
+    x = rect.x - preferred_palette_width - 5;
+    y = rect.y - (preferred_palette_height - bottom_space);
+  } else if (rect.x + preferred_palette_width < client_rect.width) {
+    x = rect.x + 5;
+    y = rect.y - (preferred_palette_height - bottom_space);
+  } else
+    show_fullscreen = true;
+  const isSmallDevice = isDeviceSmallerThan("sm");
+  if (isSmallDevice) {
+    palette.showAsToolbox(rect);
+  } else if (show_fullscreen)
+    palette.show_fullscreen(client_rect.width, client_rect.height);
+  else
+    palette.show(x, y, show_above);
+}
+let commands = [
+  { caption: "Normal", description: "This is normal text style", tags: "text", icon: FaRemoveFormat, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setParagraph().run();
+    else
+      editor.commands.setParagraph();
+  } },
+  { caption: "Heading 1", description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
+    else
+      editor.commands.setHeading({ level: 1 });
+  } },
+  { caption: "Heading 2", description: "Description heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
+    else
+      editor.commands.setHeading({ level: 2 });
+  } },
+  { caption: "Code", description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setAsCode().run();
+    else
+      editor.commands.setAsCode();
+  } },
+  { caption: "Comment", description: "With this you can comment the above paragraph", icon: FaComment, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setAsComment().run();
+    else
+      editor.commands.setAsComment();
+  } },
+  { caption: "Quote", description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setAsQuote().run();
+    else
+      editor.commands.setAsQuote();
+  } },
+  { caption: "Warning", description: "An important warning to above paragraph", icon: FaExclamationTriangle, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setAsWarning().run();
+    else
+      editor.commands.setAsWarning();
+  } },
+  { caption: "Info", description: "An important info about above paragraph", icon: FaInfo, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setAsInfo().run();
+    else
+      editor.commands.setAsInfo();
+  } }
+];
+</script>
+
+
+
+<div bind:this={editorElement} />
+
+<Palette    commands={commands} 
+            bind:this={palette} 
+            on:palette_shown={on_palette_shown}
+            on:palette_hidden={on_palette_hidden}
+            on:palette_mouse_click={on_palette_mouse_click}/>
+
+<!--div    contenteditable="true" 
+        bind:this={editorElement}
+        on:keyup={on_keyup}
+        on:keydown={on_keydown}
+        on:mouseup={on_mouseup}
+        class="{cs}     {appearance_class} 
+                        prose prose-base sm:prose-base dark:prose-invert {additional_class} overflow-y-auto whitespace-pre-wrap"
+        on:blur={on_blur}
+        on:focus={on_focus}
+        on:focus
+        on:blur
+        >
+   {@html value}
+</div-->

package/components/document/editor.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: string | undefined;
+        placeholder?: string | undefined;
+        self?: null | undefined;
+        a?: string | undefined;
+        context?: string | undefined;
+        typename?: string | undefined;
+        compact?: boolean | undefined;
+        onFocusCb?: undefined;
+        onBlurCb?: undefined;
+        c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
+        run?: ((onStop?: undefined) => void) | undefined;
+        getFormattingOperations?: ((withCaptions?: boolean) => any[]) | undefined;
+        save?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
+export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
+    get run(): (onStop?: undefined) => void;
+    get getFormattingOperations(): (withCaptions?: boolean) => any[];
+    get save(): () => void;
+}
+export {};

package/components/document/internal/findSuggestionMatch.d.ts

@@ -0,0 +1,16 @@
+import { type Range } from '@tiptap/core';
+import { ResolvedPos } from '@tiptap/pm/model';
+export interface Trigger {
+    char: string;
+    allowSpaces: boolean;
+    allowToIncludeChar: boolean;
+    allowedPrefixes: string[] | null;
+    startOfLine: boolean;
+    $position: ResolvedPos;
+}
+export type SuggestionMatch = {
+    range: Range;
+    query: string;
+    text: string;
+} | null;
+export declare function findSuggestionMatch(config: Trigger): SuggestionMatch;

package/components/document/internal/findSuggestionMatch.js

@@ -0,0 +1,51 @@
+import { escapeForRegEx } from '@tiptap/core';
+import {} from '@tiptap/core';
+import { ResolvedPos } from '@tiptap/pm/model';
+export function findSuggestionMatch(config) {
+    const { char, allowSpaces: allowSpacesOption, allowToIncludeChar, allowedPrefixes, startOfLine, $position, } = config;
+    const allowSpaces = allowSpacesOption && !allowToIncludeChar;
+    const escapedChar = escapeForRegEx(char);
+    const suffix = new RegExp(`\\s${escapedChar}$`);
+    const prefix = startOfLine ? '^' : '';
+    const finalEscapedChar = allowToIncludeChar ? '' : escapedChar;
+    const regexp = allowSpaces
+        ? new RegExp(`${prefix}${escapedChar}.*?(?=\\s${finalEscapedChar}|$)`, 'gm')
+        : new RegExp(`${prefix}(?:^)?${escapedChar}[^\\s${finalEscapedChar}]*`, 'gm');
+    const text = $position.nodeBefore?.isText && $position.nodeBefore.text;
+    if (!text) {
+        return null;
+    }
+    const textFrom = $position.pos - text.length;
+    const match = Array.from(text.matchAll(regexp)).pop();
+    if (!match || match.input === undefined || match.index === undefined) {
+        return null;
+    }
+    // JavaScript doesn't have lookbehinds. This hacks a check that first character
+    // is a space or the start of the line
+    const matchPrefix = match.input.slice(Math.max(0, match.index - 1), match.index);
+    const matchPrefixIsAllowed = new RegExp(`^[${allowedPrefixes?.join('')}\0]?$`).test(matchPrefix);
+    if (allowedPrefixes !== null && !matchPrefixIsAllowed) {
+        return null;
+    }
+    // The absolute position of the match in the document
+    const from = textFrom + match.index;
+    let to = from + match[0].length;
+    // Edge case handling; if spaces are allowed and we're directly in between
+    // two triggers
+    if (allowSpaces && suffix.test(text.slice(to - 1, to + 1))) {
+        match[0] += ' ';
+        to += 1;
+    }
+    // If the $position is located within the matched substring, return that range
+    if (from < $position.pos && to >= $position.pos) {
+        return {
+            range: {
+                from,
+                to,
+            },
+            query: match[0].slice(char.length),
+            text: match[0],
+        };
+    }
+    return null;
+}

package/components/document/internal/palette.svelte

@@ -13,6 +13,10 @@ let filtered_commands = [...commands];
 let current_command = filtered_commands.length ? filtered_commands[0] : null;
 let isToolbox = false;
 const dispatch = createEventDispatcher();
+let current_editor_range = void 0;
+export function set_current_editor_range(range) {
+  current_editor_range = range;
+}
 let toolboxX;
 let toolboxY;
 export function showAsToolbox(rect) {
@@ -66,14 +70,14 @@ export function execute_selected_command() {
   if (!current_command)
     return;
   hide();
-  current_command.on_choice();
+  current_command.on_choice(current_editor_range);
 }
 export function filter(key) {
   if (!filtered_commands)
-    return;
+    return filtered_commands;
   if (!key) {
     filtered_commands = [...commands];
-    return;
+    return filtered_commands;
   }
   let was_any_items_before = filtered_commands.length > 0;
   filtered_commands = [];
@@ -91,6 +95,10 @@ export function filter(key) {
   }
   if (!was_any_items_before && filtered_commands.length == 0)
     hide();
+  return filtered_commands;
+}
+export function get_filtered_commands() {
+  return filtered_commands;
 }
 export function navigate_up() {
   if (!current_command) {
@@ -117,7 +125,7 @@ async function execute_mouse_click(on_choice) {
     return;
   dispatch("palette_mouse_click");
   hide();
-  on_choice();
+  on_choice(current_editor_range);
 }
 function on_mouse_over(cmd) {
   current_command = cmd;

package/components/document/internal/palette.svelte.d.ts

@@ -5,12 +5,14 @@ declare const __propDef: {
         commands: Document_command[];
         width_px?: number | undefined;
         max_height_px?: number | undefined;
+        set_current_editor_range?: ((range: any) => void) | undefined;
         showAsToolbox?: ((rect: DOMRect) => void) | undefined;
         show?: ((x: number, y: number, up?: boolean) => void) | undefined;
         show_fullscreen?: ((_width_px: number, _height_px: number) => void) | undefined;
         hide?: (() => void) | undefined;
         execute_selected_command?: (() => void) | undefined;
-        filter?: ((key: string) => void) | undefined;
+        filter?: ((key: string) => Document_command[]) | undefined;
+        get_filtered_commands?: (() => Document_command[]) | undefined;
         navigate_up?: (() => void) | undefined;
         navigate_down?: (() => void) | undefined;
     };
@@ -27,12 +29,14 @@ export type PaletteProps = typeof __propDef.props;
 export type PaletteEvents = typeof __propDef.events;
 export type PaletteSlots = typeof __propDef.slots;
 export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteEvents, PaletteSlots> {
+    get set_current_editor_range(): (range: any) => void;
     get showAsToolbox(): (rect: DOMRect) => void;
     get show(): (x: number, y: number, up?: boolean) => void;
     get show_fullscreen(): (_width_px: number, _height_px: number) => void;
     get hide(): () => void;
     get execute_selected_command(): () => void;
-    get filter(): (key: string) => void;
+    get filter(): (key: string) => Document_command[];
+    get get_filtered_commands(): () => Document_command[];
     get navigate_up(): () => void;
     get navigate_down(): () => void;
     get commands(): Document_command[];
@@ -68,5 +72,11 @@ export default class Palette extends SvelteComponentTyped<PaletteProps, PaletteE
     get undefined(): any;
     /**accessor*/
     set undefined(_: any);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
+    get undefined(): any;
+    /**accessor*/
+    set undefined(_: any);
 }
 export {};

package/components/document/internal/suggestion.d.ts

@@ -0,0 +1,158 @@
+import { Editor, type Range } from '@tiptap/core';
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
+import { EditorView } from '@tiptap/pm/view';
+import { findSuggestionMatch as defaultFindSuggestionMatch } from './findSuggestionMatch';
+export interface SuggestionOptions<I = any, TSelected = any> {
+    /**
+     * The plugin key for the suggestion plugin.
+     * @default 'suggestion'
+     * @example 'mention'
+     */
+    pluginKey?: PluginKey;
+    /**
+     * The editor instance.
+     * @default null
+     */
+    editor: Editor;
+    /**
+     * The character that triggers the suggestion.
+     * @default '@'
+     * @example '#'
+     */
+    char?: string;
+    /**
+     * Allow spaces in the suggestion query. Not compatible with `allowToIncludeChar`. Will be disabled if `allowToIncludeChar` is set to `true`.
+     * @default false
+     * @example true
+    */
+    allowSpaces?: boolean;
+    /**
+     * Allow the character to be included in the suggestion query. Not compatible with `allowSpaces`.
+     * @default false
+     */
+    allowToIncludeChar?: boolean;
+    /**
+     * Allow prefixes in the suggestion query.
+     * @default [' ']
+     * @example [' ', '@']
+     */
+    allowedPrefixes?: string[] | null;
+    /**
+     * Only match suggestions at the start of the line.
+     * @default false
+     * @example true
+     */
+    startOfLine?: boolean;
+    /**
+     * The tag name of the decoration node.
+     * @default 'span'
+     * @example 'div'
+     */
+    decorationTag?: string;
+    /**
+     * The class name of the decoration node.
+     * @default 'suggestion'
+     * @example 'mention'
+     */
+    decorationClass?: string;
+    /**
+     * A function that is called when a suggestion is selected.
+     * @param props The props object.
+     * @param props.editor The editor instance.
+     * @param props.range The range of the suggestion.
+     * @param props.props The props of the selected suggestion.
+     * @returns void
+     * @example ({ editor, range, props }) => { props.command(props.props) }
+     */
+    command?: (props: {
+        editor: Editor;
+        range: Range;
+        props: TSelected;
+    }) => void;
+    /**
+     * A function that returns the suggestion items in form of an array.
+     * @param props The props object.
+     * @param props.editor The editor instance.
+     * @param props.query The current suggestion query.
+     * @returns An array of suggestion items.
+     * @example ({ editor, query }) => [{ id: 1, label: 'John Doe' }]
+     */
+    items?: (props: {
+        query: string;
+        editor: Editor;
+    }) => I[] | Promise<I[]>;
+    /**
+     * The render function for the suggestion.
+     * @returns An object with render functions.
+     */
+    render?: () => {
+        onBeforeStart?: (props: SuggestionProps<I, TSelected>) => void;
+        onStart?: (props: SuggestionProps<I, TSelected>) => void;
+        onBeforeUpdate?: (props: SuggestionProps<I, TSelected>) => void;
+        onUpdate?: (props: SuggestionProps<I, TSelected>) => void;
+        onExit?: (props: SuggestionProps<I, TSelected>) => void;
+        onKeyDown?: (props: SuggestionKeyDownProps) => boolean;
+    };
+    /**
+     * A function that returns a boolean to indicate if the suggestion should be active.
+     * @param props The props object.
+     * @returns {boolean}
+     */
+    allow?: (props: {
+        editor: Editor;
+        state: EditorState;
+        range: Range;
+        isActive?: boolean;
+    }) => boolean;
+    findSuggestionMatch?: typeof defaultFindSuggestionMatch;
+}
+export interface SuggestionProps<I = any, TSelected = any> {
+    /**
+     * The editor instance.
+     */
+    editor: Editor;
+    /**
+     * The range of the suggestion.
+     */
+    range: Range;
+    /**
+     * The current suggestion query.
+     */
+    query: string;
+    /**
+     * The current suggestion text.
+     */
+    text: string;
+    /**
+     * The suggestion items array.
+     */
+    items: I[];
+    /**
+     * A function that is called when a suggestion is selected.
+     * @param props The props object.
+     * @returns void
+     */
+    command: (props: TSelected) => void;
+    /**
+     * The decoration node HTML element
+     * @default null
+     */
+    decorationNode: Element | null;
+    /**
+     * The function that returns the client rect
+     * @default null
+     * @example () => new DOMRect(0, 0, 0, 0)
+     */
+    clientRect?: (() => DOMRect | null) | null;
+}
+export interface SuggestionKeyDownProps {
+    view: EditorView;
+    event: KeyboardEvent;
+    range: Range;
+}
+export declare const SuggestionPluginKey: PluginKey<any>;
+/**
+ * This utility allows you to create suggestions.
+ * @see https://tiptap.dev/api/utilities/suggestion
+ */
+export declare function Suggestion<I = any, TSelected = any>({ pluginKey, editor, char, allowSpaces, allowToIncludeChar, allowedPrefixes, startOfLine, decorationTag, decorationClass, command, items, render, allow, findSuggestionMatch, }: SuggestionOptions<I, TSelected>): Plugin<any>;

package/components/document/internal/suggestion.js

@@ -0,0 +1,194 @@
+import { Editor } from '@tiptap/core';
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet, EditorView } from '@tiptap/pm/view';
+import { findSuggestionMatch as defaultFindSuggestionMatch } from './findSuggestionMatch';
+export const SuggestionPluginKey = new PluginKey('suggestion');
+/**
+ * This utility allows you to create suggestions.
+ * @see https://tiptap.dev/api/utilities/suggestion
+ */
+export function Suggestion({ pluginKey = SuggestionPluginKey, editor, char = '@', allowSpaces = false, allowToIncludeChar = false, allowedPrefixes = [' '], startOfLine = false, decorationTag = 'span', decorationClass = 'suggestion', command = () => null, items = () => [], render = () => ({}), allow = () => true, findSuggestionMatch = defaultFindSuggestionMatch, }) {
+    let props;
+    const renderer = render?.();
+    const plugin = new Plugin({
+        key: pluginKey,
+        view() {
+            return {
+                update: async (view, prevState) => {
+                    const prev = this.key?.getState(prevState);
+                    const next = this.key?.getState(view.state);
+                    // See how the state changed
+                    const moved = prev.active && next.active && prev.range.from !== next.range.from;
+                    const started = !prev.active && next.active;
+                    const stopped = prev.active && !next.active;
+                    const changed = !started && !stopped && prev.query !== next.query;
+                    const handleStart = started || (moved && changed);
+                    const handleChange = changed || moved;
+                    const handleExit = stopped || (moved && changed);
+                    // Cancel when suggestion isn't active
+                    if (!handleStart && !handleChange && !handleExit) {
+                        return;
+                    }
+                    const state = handleExit && !handleStart ? prev : next;
+                    const decorationNode = view.dom.querySelector(`[data-decoration-id="${state.decorationId}"]`);
+                    props = {
+                        editor,
+                        range: state.range,
+                        query: state.query,
+                        text: state.text,
+                        items: [],
+                        command: commandProps => {
+                            return command({
+                                editor,
+                                range: state.range,
+                                props: commandProps,
+                            });
+                        },
+                        decorationNode,
+                        // virtual node for popper.js or tippy.js
+                        // this can be used for building popups without a DOM node
+                        clientRect: decorationNode
+                            ? () => {
+                                // because of `items` can be asynchrounous we’ll search for the current decoration node
+                                const { decorationId } = this.key?.getState(editor.state); // eslint-disable-line
+                                const currentDecorationNode = view.dom.querySelector(`[data-decoration-id="${decorationId}"]`);
+                                return currentDecorationNode?.getBoundingClientRect() || null;
+                            }
+                            : null,
+                    };
+                    if (handleStart) {
+                        renderer?.onBeforeStart?.(props);
+                    }
+                    if (handleChange) {
+                        renderer?.onBeforeUpdate?.(props);
+                    }
+                    if (handleChange || handleStart) {
+                        props.items = await items({
+                            editor,
+                            query: state.query,
+                        });
+                    }
+                    if (handleExit) {
+                        //console.log('plugin onExit handleExit')
+                        renderer?.onExit?.(props);
+                    }
+                    if (handleChange) {
+                        renderer?.onUpdate?.(props);
+                    }
+                    if (handleStart) {
+                        renderer?.onStart?.(props);
+                    }
+                },
+                destroy: () => {
+                    if (!props) {
+                        return;
+                    }
+                    //console.log('plugin onExit destroy')
+                    renderer?.onExit?.(props);
+                },
+            };
+        },
+        state: {
+            // Initialize the plugin's internal state.
+            init() {
+                const state = {
+                    active: false,
+                    range: {
+                        from: 0,
+                        to: 0,
+                    },
+                    query: null,
+                    text: null,
+                    composing: false,
+                };
+                return state;
+            },
+            // Apply changes to the plugin state from a view transaction.
+            apply(transaction, prev, _oldState, state) {
+                const { isEditable } = editor;
+                const { composing } = editor.view;
+                const { selection } = transaction;
+                const { empty, from } = selection;
+                const next = { ...prev };
+                let blockPluginActivation = false;
+                if (!prev.active) {
+                    blockPluginActivation = true;
+                    if (transaction && transaction.steps.length > 0) {
+                        const modStep = transaction.steps.find(s => s.jsonID === 'replace');
+                        if (modStep)
+                            blockPluginActivation = false;
+                    }
+                }
+                next.composing = composing;
+                // We can only be suggesting if the view is editable, and:
+                //   * there is no selection, or
+                //   * a composition is active (see: https://github.com/ueberdosis/tiptap/issues/1449)
+                if (isEditable && (empty || editor.view.composing) && !blockPluginActivation) {
+                    // Reset active state if we just left the previous suggestion range
+                    if ((from < prev.range.from || from > prev.range.to) && !composing && !prev.composing) {
+                        next.active = false;
+                    }
+                    // Try to match against where our cursor currently is
+                    const match = findSuggestionMatch({
+                        char,
+                        allowSpaces,
+                        allowToIncludeChar,
+                        allowedPrefixes,
+                        startOfLine,
+                        $position: selection.$from,
+                    });
+                    const decorationId = `id_${Math.floor(Math.random() * 0xffffffff)}`;
+                    // If we found a match, update the current state to show it
+                    if (match && allow({
+                        editor, state, range: match.range, isActive: prev.active,
+                    })) {
+                        next.active = true;
+                        next.decorationId = prev.decorationId ? prev.decorationId : decorationId;
+                        next.range = match.range;
+                        next.query = match.query;
+                        next.text = match.text;
+                    }
+                    else {
+                        next.active = false;
+                    }
+                }
+                else {
+                    next.active = false;
+                }
+                // Make sure to empty the range if suggestion is inactive
+                if (!next.active) {
+                    next.decorationId = null;
+                    next.range = { from: 0, to: 0 };
+                    next.query = null;
+                    next.text = null;
+                }
+                return next;
+            },
+        },
+        props: {
+            // Call the keydown hook if suggestion is active.
+            handleKeyDown(view, event) {
+                const { active, range } = plugin.getState(view.state);
+                if (!active) {
+                    return false;
+                }
+                return renderer?.onKeyDown?.({ view, event, range }) || false;
+            },
+            // Setup decorator on the currently active suggestion.
+            decorations(state) {
+                const { active, range, decorationId } = plugin.getState(state);
+                if (!active) {
+                    return null;
+                }
+                return DecorationSet.create(state.doc, [
+                    Decoration.inline(range.from, range.to, {
+                        nodeName: decorationTag,
+                        class: decorationClass,
+                        'data-decoration-id': decorationId,
+                    }),
+                ]);
+            },
+        },
+    });
+    return plugin;
+}

package/index.d.ts

@@ -21,6 +21,7 @@ export { default as Combo } from './components/combo/combo.svelte';
 export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
+export { default as Editor } from './components/document/editor.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';
 export { default as Fab } from './components/Fab.svelte';

package/index.js

@@ -26,6 +26,7 @@ export { default as Combo } from './components/combo/combo.svelte';
 export { default as ComboSource } from './components/combo/combo.source.svelte';
 export { default as ComboItem } from './components/combo/combo.item.svelte';
 export { default as RichEdit } from './components/document/rich.edit.svelte';
+export { default as Editor } from './components/document/editor.svelte';
 export { default as Spinner } from './components/delayed.spinner.svelte';
 //export { default as Menu } from './components/contextmenu.svelte'
 export { showMenu, showGridMenu, showFloatingToolbar } from './components/menu';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -27,6 +27,10 @@
   "type": "module",
   "dependencies": {
     "@humandialog/auth.svelte": "^1.8.3",
+    "@tiptap/core": "^2.11.0",
+    "@tiptap/pm": "^2.11.0",
+    "@tiptap/starter-kit": "^2.11.0",
+    "@tiptap/suggestion": "^2.11.0",
     "flowbite-svelte": "^0.44.4",
     "svelte-icons": "^2.1.0",
     "svelte-spa-router": "^4.0.1"
@@ -60,7 +64,9 @@
     "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
     "./components/delayed.spinner.svelte": "./components/delayed.spinner.svelte",
+    "./components/document/editor.svelte": "./components/document/editor.svelte",
     "./components/document/internal/Document_command": "./components/document/internal/Document_command.js",
+    "./components/document/internal/findSuggestionMatch": "./components/document/internal/findSuggestionMatch.js",
     "./components/document/internal/h1.icon.svelte": "./components/document/internal/h1.icon.svelte",
     "./components/document/internal/h2.icon.svelte": "./components/document/internal/h2.icon.svelte",
     "./components/document/internal/h3.icon.svelte": "./components/document/internal/h3.icon.svelte",
@@ -69,6 +75,7 @@
     "./components/document/internal/palette.svelte": "./components/document/internal/palette.svelte",
     "./components/document/internal/Selection_helper": "./components/document/internal/Selection_helper.js",
     "./components/document/internal/Selection_range": "./components/document/internal/Selection_range.js",
+    "./components/document/internal/suggestion": "./components/document/internal/suggestion.js",
     "./components/document/rich.edit.svelte": "./components/document/rich.edit.svelte",
     "./components/edit.field.svelte": "./components/edit.field.svelte",
     "./components/Fab.svelte": "./components/Fab.svelte",