BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/form-definitions.ts

   1 import {EditorFormDefinition, EditorSelectFormFieldDefinition} from "../framework/forms";
   2 import {EditorUiContext} from "../framework/core";
   3 import {$createLinkNode} from "@lexical/link";
   4 import {$createTextNode, $getSelection} from "lexical";
   5 import {$createImageNode} from "../../nodes/image";
   6 import {setEditorContentFromHtml} from "../../actions";
   7
   8
   9 export const link: EditorFormDefinition = {
  10     submitText: 'Apply',
  11     action(formData, context: EditorUiContext) {
  12         context.editor.update(() => {
  13
  14             const selection = $getSelection();
  15
  16             const linkNode = $createLinkNode(formData.get('url')?.toString() || '', {
  17                 title: formData.get('title')?.toString() || '',
  18                 target: formData.get('target')?.toString() || '',
  19             });
  20             linkNode.append($createTextNode(formData.get('text')?.toString() || ''));
  21
  22             selection?.insertNodes([linkNode]);
  23         });
  24         return true;
  25     },
  26     fields: [
  27         {
  28             label: 'URL',
  29             name: 'url',
  30             type: 'text',
  31         },
  32         {
  33             label: 'Text to display',
  34             name: 'text',
  35             type: 'text',
  36         },
  37         {
  38             label: 'Title',
  39             name: 'title',
  40             type: 'text',
  41         },
  42         {
  43             label: 'Open link in...',
  44             name: 'target',
  45             type: 'select',
  46             valuesByLabel: {
  47                 'Current window': '',
  48                 'New window': '_blank',
  49             }
  50         } as EditorSelectFormFieldDefinition,
  51     ],
  52 };
  53
  54 export const image: EditorFormDefinition = {
  55     submitText: 'Apply',
  56     action(formData, context: EditorUiContext) {
  57         context.editor.update(() => {
  58             const selection = $getSelection();
  59             const imageNode = $createImageNode(formData.get('src')?.toString() || '', {
  60                 alt: formData.get('alt')?.toString() || '',
  61                 height: Number(formData.get('height')?.toString() || '0'),
  62                 width: Number(formData.get('width')?.toString() || '0'),
  63             });
  64             selection?.insertNodes([imageNode]);
  65         });
  66         return true;
  67     },
  68     fields: [
  69         {
  70             label: 'Source',
  71             name: 'src',
  72             type: 'text',
  73         },
  74         {
  75             label: 'Alternative description',
  76             name: 'alt',
  77             type: 'text',
  78         },
  79         {
  80             label: 'Width',
  81             name: 'width',
  82             type: 'text',
  83         },
  84         {
  85             label: 'Height',
  86             name: 'height',
  87             type: 'text',
  88         },
  89     ],
  90 };
  91
  92 export const source: EditorFormDefinition = {
  93     submitText: 'Save',
  94     action(formData, context: EditorUiContext) {
  95         setEditorContentFromHtml(context.editor, formData.get('source')?.toString() || '');
  96         return true;
  97     },
  98     fields: [
  99         {
 100             label: 'Source',
 101             name: 'source',
 102             type: 'textarea',
 103         },
 104     ],
 105 };