@humandialog/forms.svelte 1.7.0 → 1.7.1

package/components/document/editor.svelte

@@ -26,6 +26,8 @@ import Underline from "@tiptap/extension-underline";
 import Dropcursor from "@tiptap/extension-dropcursor";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import History from "@tiptap/extension-history";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { getAttributes } from "@tiptap/core";
 import { data_tick_store, contextItemsStore, contextTypesStore, onErrorShowAlert, pushToolsActionsOperations, popToolsActionsOperations } from "../../stores.js";
 import { informModification, pushChanges } from "../../updates.js";
 import { isDeviceSmallerThan, parseWidthDirective, refreshToolbarOperations, UI } from "../../utils.js";
@@ -69,6 +71,7 @@ export let onFocusCb = void 0;
 export let onBlurCb = void 0;
 export let onAddImage = void 0;
 export let onRemoveImage = void 0;
+export let onLinkClick = void 0;
 export let c = "";
 export let pushChangesImmediately = true;
 export let chat = void 0;
@@ -555,6 +558,45 @@ const additionalShortcuts = Extension.create({
     };
   }
 });
+export const CustomLink = Link.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false
+      //showMap: () => {},
+      //setMapQuery: () => {},
+    };
+  },
+  addProseMirrorPlugins() {
+    const plugins = this.parent?.() || [];
+    const extensionOptions = this.options;
+    const clickHandler = new Plugin({
+      key: new PluginKey("handleControlClick"),
+      props: {
+        handleClick(view, pos, event) {
+          if (event.button !== 0) {
+            return false;
+          }
+          if (!view.editable) {
+            return false;
+          }
+          const attrs = getAttributes(view.state, "link");
+          const link = event.target?.closest("a");
+          if (link && attrs.href) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onLinkClick)
+              onLinkClick(attrs.href, attrs.target);
+            return true;
+          }
+          return false;
+        }
+      }
+    });
+    plugins.push(clickHandler);
+    return plugins;
+  }
+});
 onMount(() => {
   editor = new Editor({
     editable: !readOnly,
@@ -598,7 +640,11 @@ onMount(() => {
       Italic,
       Strike,
       Underline,
-      Link,
+      ...onLinkClick ? [
+        CustomLink.configure({
+          //showMap: () => { showMap(true); },
+        })
+      ] : [Link],
       Dropcursor,
       Gapcursor,
       History,
@@ -834,6 +880,9 @@ export function removeTemporaryImage(temporarySrc) {
     return;
   editor.commands.deleteRange(image.range);
 }
+export function addLink(title, href) {
+  editor.chain().setLink({ href }).insertContent(title).unsetMark("link").insertContent(" ").focus().run();
+}
 export function getInnerHtml() {
   return editor.getHTML();
 }
@@ -1014,50 +1063,50 @@ export function hasChanged() {
   return hasChangedValue;
 }
 const paletteMarksCommands = () => [
-  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
-  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "strong", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
-  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
-  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
+  { caption: i18n({ en: "Bold", es: "Negrita", pl: "Pogrubiony" }), description: "Marks text as bolded", tags: "strong,bold", icon: FaBold, on_choice: makeBold, is_active: () => editor?.isActive("bold") },
+  { caption: i18n({ en: "Italic", es: "Cursiva", pl: "Kursywa" }), description: "Marks text as italic", tags: "italic,em", icon: FaItalic, on_choice: makeItalic, is_active: () => editor?.isActive("italic") },
+  { caption: i18n({ en: "Underline", es: "Subrayar", pl: "Podkre\u015Blenie" }), description: "Marks text as underlined", tags: "under", icon: FaUnderline, on_choice: makeUnderline, is_active: () => editor?.isActive("underline") },
+  { caption: i18n({ en: "Strikethrough", es: "Tachado", pl: "Przekre\u015Blenie" }), description: "Marks text as strikethrough", tags: "strike", icon: FaStrikethrough, on_choice: makeStrikethrough, is_active: () => editor?.isActive("strike") }
 ];
 const paletteStylesCommands = () => [
-  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text", icon: FaRemoveFormat, on_choice: (range) => {
-    if (range)
-      editor.chain().focus().deleteRange(range).setParagraph().run();
-    else
-      editor.chain().focus().setParagraph().run();
-  }, is_active: () => editor?.isActive("paragraph") },
-  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1", icon: IcH1, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 1", es: "T\xEDtulo 1", pl: "Nag\u0142\xF3wek 1" }), description: "Description heading", tags: "h1,head", icon: IcH1, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 1 }).run();
     else
       editor.chain().focus().setHeading({ level: 1 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 1 }) },
-  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2", icon: IcH2, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 2", es: "T\xEDtulo 2", pl: "Nag\u0142\xF3wek 2" }), description: "Secondary heading", tags: "h2,head", icon: IcH2, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 2 }).run();
     else
       editor.chain().focus().setHeading({ level: 2 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 2 }) },
-  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3", icon: IcH3, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 3", es: "T\xEDtulo 3", pl: "Nag\u0142\xF3wek 3" }), description: "Secondary heading", tags: "h3,head", icon: IcH3, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 3 }).run();
     else
       editor.chain().focus().setHeading({ level: 3 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 3 }) },
-  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4", icon: IcH4, on_choice: (range) => {
+  { caption: i18n({ en: "Heading 4", es: "T\xEDtulo 4", pl: "Nag\u0142\xF3wek 4" }), description: "Secondary heading", tags: "h4,head", icon: IcH4, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHeading({ level: 4 }).run();
     else
       editor.chain().focus().setHeading({ level: 4 }).run();
   }, is_active: () => editor?.isActive("heading", { level: 4 }) },
-  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", icon: FaCode, on_choice: (range) => {
+  { caption: i18n({ en: "Normal", es: "Normal", pl: "Normalny" }), description: "This is normal text style", tags: "paragraph,text,normal", icon: FaRemoveFormat, on_choice: (range) => {
+    if (range)
+      editor.chain().focus().deleteRange(range).setParagraph().run();
+    else
+      editor.chain().focus().setParagraph().run();
+  }, is_active: () => editor?.isActive("paragraph") },
+  { caption: i18n({ en: "Code", es: "C\xF3digo", pl: "Kod" }), description: "Source code monospace text", tags: "code", icon: FaCode, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setCodeBlock().run();
     else
       editor.chain().focus().setCodeBlock().run();
   }, is_active: () => editor?.isActive("CodeBlock") },
   //    {   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.chain().focus().setAsComment().run() }, is_active: () => editor?.isActive('CommentBlock')  } ,
-  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", icon: FaQuoteRight, on_choice: (range) => {
+  { caption: i18n({ en: "Quote", es: "Cita", pl: "Cytat" }), description: "To quote someone", tags: "quote", icon: FaQuoteRight, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setAsQuote().run();
     else
@@ -1065,7 +1114,7 @@ const paletteStylesCommands = () => [
   }, is_active: () => editor?.isActive("QuoteBlock") },
   //    {   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.chain().focus().setAsWarning().run() }, is_active: () => editor?.isActive('WarningBlock')  } ,
   //    {   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.chain().focus().setAsInfo().run() }, is_active: () => editor?.isActive('InfoBlock')  },
-  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", icon: FaListUl, on_choice: (range) => {
+  { caption: i18n({ en: "BulletList", es: "Lista con vi\xF1etas", pl: "Lista punktowana" }), description: "Unordered list of items", tags: "bullet", icon: FaListUl, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).toggleBulletList().run();
     else
@@ -1079,13 +1128,13 @@ const paletteInsertCommands = () => [
     if (onAddImage)
       onAddImage(onAddedImageReady);
   } },
-  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", icon: FaTable, on_choice: (range) => {
+  { caption: i18n({ en: "Table", es: "Tabla", pl: "Tabela" }), description: "Table", tags: "table", icon: FaTable, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).insertTable().run();
     else
       editor.chain().focus().insertTable().run();
   }, is_active: () => editor?.isActive("table") },
-  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr", icon: FaGripLines, on_choice: (range) => {
+  { caption: i18n({ en: "Horizontal rule", es: "Regla horizontal", pl: "Pozioma linia" }), description: "Add horizonal role", tags: "hr,line", icon: FaGripLines, on_choice: (range) => {
     if (range)
       editor.chain().focus().deleteRange(range).setHorizontalRule().run();
     else

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

@@ -15,6 +15,7 @@ declare const __propDef: {
         onBlurCb?: undefined;
         onAddImage?: undefined;
         onRemoveImage?: undefined;
+        onLinkClick?: Function | undefined;
         c?: string | undefined;
         pushChangesImmediately?: boolean | undefined;
         chat?: object | undefined;
@@ -43,10 +44,12 @@ declare const __propDef: {
             tbr: string;
         }) | undefined;
         scrollIntoView?: ((param: any) => void) | undefined;
+        CustomLink?: import("@tiptap/core").Mark<{}, any> | undefined;
         save?: (() => Promise<void>) | undefined;
         addTemporaryImage?: ((src: any) => void) | undefined;
         replaceTemporaryImage?: ((temporarySrc: any, dataPath: any) => void) | undefined;
         removeTemporaryImage?: ((temporarySrc: any) => void) | undefined;
+        addLink?: ((title: any, href: any) => void) | undefined;
         getInnerHtml?: (() => any) | undefined;
         setInnerHtml?: ((content: any) => void) | undefined;
         setBold?: (() => void) | undefined;
@@ -116,10 +119,12 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
         tbr: string;
     };
     get scrollIntoView(): (param: any) => void;
+    get CustomLink(): import("@tiptap/core").Mark<{}, any>;
     get save(): () => Promise<void>;
     get addTemporaryImage(): (src: any) => void;
     get replaceTemporaryImage(): (temporarySrc: any, dataPath: any) => void;
     get removeTemporaryImage(): (temporarySrc: any) => void;
+    get addLink(): (title: any, href: any) => void;
     get getInnerHtml(): () => any;
     get setInnerHtml(): (content: any) => void;
     get setBold(): () => void;

package/components/document/internal/palette.svelte

@@ -57,10 +57,12 @@ export function show(x, y, up = false) {
   visible = true;
   dispatch("palette_shown");
   closeButtonPos = "";
-  setTimeout(() => {
-    const rect = paletteElement.getBoundingClientRect();
-    closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
-  }, 0);
+  if (isDeviceSmallerThan("sm")) {
+    setTimeout(() => {
+      const rect = paletteElement.getBoundingClientRect();
+      closeButtonPos = `right: ${15}px; top: calc(${rect.y}px - 1.75rem)`;
+    }, 0);
+  }
 }
 export function show_fullscreen(_width_px, _height_px) {
   isToolbox = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",