BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/forms/objects.ts

   1 import {
   2     EditorFormDefinition,
   3     EditorFormField,
   4     EditorFormTabs,
   5     EditorSelectFormFieldDefinition
   6 } from "../../framework/forms";
   7 import {EditorUiContext} from "../../framework/core";
   8 import {$createTextNode, $getSelection, $insertNodes} from "lexical";
   9 import {$isImageNode, ImageNode} from "../../../nodes/image";
  10 import {$createLinkNode, $isLinkNode} from "@lexical/link";
  11 import {$createMediaNodeFromHtml, $createMediaNodeFromSrc, $isMediaNode, MediaNode} from "../../../nodes/media";
  12 import {$insertNodeToNearestRoot} from "@lexical/utils";
  13 import {$getNodeFromSelection, getLastSelection} from "../../../utils/selection";
  14 import {EditorFormModal} from "../../framework/modals";
  15 import {EditorActionField} from "../../framework/blocks/action-field";
  16 import {EditorButton} from "../../framework/buttons";
  17 import {showImageManager} from "../../../utils/images";
  18 import searchImageIcon from "@icons/editor/image-search.svg";
  19 import searchIcon from "@icons/search.svg";
  20 import {showLinkSelector} from "../../../utils/links";
  21 import {LinkField} from "../../framework/blocks/link-field";
  22
  23 export function $showImageForm(image: ImageNode, context: EditorUiContext) {
  24     const imageModal: EditorFormModal = context.manager.createModal('image');
  25     const height = image.getHeight();
  26     const width = image.getWidth();
  27
  28     const formData = {
  29         src: image.getSrc(),
  30         alt: image.getAltText(),
  31         height: height === 0 ? '' : String(height),
  32         width: width === 0 ? '' : String(width),
  33     };
  34
  35     imageModal.show(formData);
  36 }
  37
  38 export const image: EditorFormDefinition = {
  39     submitText: 'Apply',
  40     async action(formData, context: EditorUiContext) {
  41         context.editor.update(() => {
  42             const selection = getLastSelection(context.editor);
  43             const selectedImage = $getNodeFromSelection(selection, $isImageNode);
  44             if ($isImageNode(selectedImage)) {
  45                 selectedImage.setSrc(formData.get('src')?.toString() || '');
  46                 selectedImage.setAltText(formData.get('alt')?.toString() || '');
  47
  48                 selectedImage.setWidth(Number(formData.get('width')?.toString() || '0'));
  49                 selectedImage.setHeight(Number(formData.get('height')?.toString() || '0'));
  50             }
  51         });
  52         return true;
  53     },
  54     fields: [
  55         {
  56             build() {
  57                 return new EditorActionField(
  58                     new EditorFormField({
  59                         label: 'Source',
  60                         name: 'src',
  61                         type: 'text',
  62                     }),
  63                     new EditorButton({
  64                         label: 'Browse files',
  65                         icon: searchImageIcon,
  66                         action(context: EditorUiContext) {
  67                             showImageManager((image) => {
  68                                  const modal =  context.manager.getActiveModal('image');
  69                                  if (modal) {
  70                                      modal.getForm().setValues({
  71                                          src: image.thumbs?.display || image.url,
  72                                          alt: image.name,
  73                                      });
  74                                  }
  75                             });
  76                         }
  77                     }),
  78                 );
  79             },
  80         },
  81         {
  82             label: 'Alternative description',
  83             name: 'alt',
  84             type: 'text',
  85         },
  86         {
  87             label: 'Width',
  88             name: 'width',
  89             type: 'text',
  90         },
  91         {
  92             label: 'Height',
  93             name: 'height',
  94             type: 'text',
  95         },
  96     ],
  97 };
  98
  99 export const link: EditorFormDefinition = {
 100     submitText: 'Apply',
 101     async action(formData, context: EditorUiContext) {
 102         context.editor.update(() => {
 103
 104             const url = formData.get('url')?.toString() || '';
 105             const title = formData.get('title')?.toString() || ''
 106             const target = formData.get('target')?.toString() || '';
 107             const text = formData.get('text')?.toString() || '';
 108
 109             const selection = $getSelection();
 110             let link = $getNodeFromSelection(selection, $isLinkNode);
 111             if ($isLinkNode(link)) {
 112                 link.setURL(url);
 113                 link.setTarget(target);
 114                 link.setTitle(title);
 115             } else {
 116                 link = $createLinkNode(url, {
 117                     title: title,
 118                     target: target,
 119                 });
 120
 121                 $insertNodes([link]);
 122             }
 123
 124             if ($isLinkNode(link)) {
 125                 for (const child of link.getChildren()) {
 126                     child.remove(true);
 127                 }
 128                 link.append($createTextNode(text));
 129             }
 130         });
 131         return true;
 132     },
 133     fields: [
 134         {
 135             build() {
 136                 return new EditorActionField(
 137                     new LinkField(new EditorFormField({
 138                         label: 'URL',
 139                         name: 'url',
 140                         type: 'text',
 141                     })),
 142                     new EditorButton({
 143                         label: 'Browse links',
 144                         icon: searchIcon,
 145                         action(context: EditorUiContext) {
 146                             showLinkSelector(entity => {
 147                                 const modal =  context.manager.getActiveModal('link');
 148                                 if (modal) {
 149                                     modal.getForm().setValues({
 150                                         url: entity.link,
 151                                         text: entity.name,
 152                                         title: entity.name,
 153                                     });
 154                                 }
 155                             });
 156                         }
 157                     }),
 158                 );
 159             },
 160         },
 161         {
 162             label: 'Text to display',
 163             name: 'text',
 164             type: 'text',
 165         },
 166         {
 167             label: 'Title',
 168             name: 'title',
 169             type: 'text',
 170         },
 171         {
 172             label: 'Open link in...',
 173             name: 'target',
 174             type: 'select',
 175             valuesByLabel: {
 176                 'Current window': '',
 177                 'New window': '_blank',
 178             }
 179         } as EditorSelectFormFieldDefinition,
 180     ],
 181 };
 182
 183 export const media: EditorFormDefinition = {
 184     submitText: 'Save',
 185     async action(formData, context: EditorUiContext) {
 186         const selectedNode: MediaNode|null = await (new Promise((res, rej) => {
 187             context.editor.getEditorState().read(() => {
 188                 const node = $getNodeFromSelection($getSelection(), $isMediaNode);
 189                 res(node as MediaNode|null);
 190             });
 191         }));
 192
 193         const embedCode = (formData.get('embed') || '').toString().trim();
 194         if (embedCode) {
 195             context.editor.update(() => {
 196                 const node = $createMediaNodeFromHtml(embedCode);
 197                 if (selectedNode && node) {
 198                     selectedNode.replace(node)
 199                 } else if (node) {
 200                     $insertNodeToNearestRoot(node);
 201                 }
 202             });
 203
 204             return true;
 205         }
 206
 207         context.editor.update(() => {
 208             const src = (formData.get('src') || '').toString().trim();
 209             const height = (formData.get('height') || '').toString().trim();
 210             const width = (formData.get('width') || '').toString().trim();
 211
 212             const updateNode = selectedNode || $createMediaNodeFromSrc(src);
 213             updateNode.setSrc(src);
 214             updateNode.setWidthAndHeight(width, height);
 215             if (!selectedNode) {
 216                 $insertNodeToNearestRoot(updateNode);
 217             }
 218         });
 219
 220         return true;
 221     },
 222     fields: [
 223         {
 224             build() {
 225                 return new EditorFormTabs([
 226                     {
 227                         label: 'General',
 228                         contents: [
 229                             {
 230                                 label: 'Source',
 231                                 name: 'src',
 232                                 type: 'text',
 233                             },
 234                             {
 235                                 label: 'Width',
 236                                 name: 'width',
 237                                 type: 'text',
 238                             },
 239                             {
 240                                 label: 'Height',
 241                                 name: 'height',
 242                                 type: 'text',
 243                             },
 244                         ],
 245                     },
 246                     {
 247                         label: 'Embed',
 248                         contents: [
 249                             {
 250                                 label: 'Paste your embed code below:',
 251                                 name: 'embed',
 252                                 type: 'textarea',
 253                             },
 254                         ],
 255                     }
 256                 ])
 257             }
 258         },
 259     ],
 260 };