generalize toolbar to use more commands

Author: noamzaks

docs/commands.rst

@@ -31,6 +31,14 @@ Toggle the format of the current selected text in one of  'bold', 'underline', '
 Example: ``formatText bold``
 
 
+Clear Formatting
+^^^^^^^^^^^^^^^^
+
+Clear all formatting of the selected text.
+
+Example: ``clearFormatting``
+
+
 Undo
 ^^^^
 
@@ -87,6 +95,32 @@ Insert a horizontal line.
 Example: ``insertHorizontalLine``
 
 
+Insert Quote
+^^^^^^^^^^^^
+
+Insert a quote node.
+
+Example: ``insertQuote``
+
+
+Insert Code Block
+^^^^^^^^^^^^^^^^^
+
+Insert a code block node.
+
+Example: ``insertCodeBlock``
+
+
+Insert Heading
+^^^^^^^^^^^^^^
+
+Insert a heading node of the specified level.
+
+Example: ``insertHeading 1``
+
+Example: ``insertHeading 6``
+
+
 Insert Typst Code
 ^^^^^^^^^^^^^^^^^
 
@@ -98,10 +132,14 @@ Example: ``insertTypstCode``
 Insert Image
 ^^^^^^^^^^^^
 
-Insert an image node with the given source URL.
+Insert an image node with the given source URL. If no argument is given, open a dialog to pick an image.
+
+Note: images are not supported on the web version due to local storage limit concerns.
 
 Example: ``insertImage ./example.png``
 
+Example: ``insertImage``
+
 
 Insert Function Call
 ^^^^^^^^^^^^^^^^^^^^
@@ -193,12 +231,12 @@ Removes the current column in the current table.
 Example: ``tableRemoveColumn``
 
 
-Toggle Link
-^^^^^^^^^^^
+Set Link
+^^^^^^^^
 
-Toggles the link of the currently selected text to equal the given URL.
+Sets the link of the currently selected text to equal the given URL.
 
-Example: ``toggleLink https://tyx-editor.com``
+Example: ``setLink https://tyx-editor.com``
 
 
 Open Link Popup
@@ -249,6 +287,14 @@ Opens the file save as dialog.
 Example: ``fileSaveAs``
 
 
+File Export
+~~~~~~~~~~~
+
+Exports the file to the given format. Currently only ``typst`` is supported.
+
+Example: ``fileExport typst``
+
+
 File Close
 ~~~~~~~~~~
 

src/commands.ts

@@ -39,13 +39,18 @@ import {
 } from "./components/plugins/tableCommands"
 import { INSERT_TYPST_CODE_COMMAND } from "./components/plugins/typstCode"
 import {
+  CLEAR_FORMATTING_COMMAND,
   FILE_CLOSE_COMMAND,
+  FILE_EXPORT_COMMAND,
   FILE_NEW_COMMAND,
   FILE_NEW_FROM_TEMPLATE_COMMAND,
   FILE_OPEN_COMMAND,
   FILE_PREVIEW_COMMAND,
   FILE_SAVE_AS_COMMAND,
   FILE_SAVE_COMMAND,
+  INSERT_CODE_BLOCK_COMMAND,
+  INSERT_HEADING_COMMAND,
+  INSERT_QUOTE_COMMAND,
   OPEN_DOCUMENT_SETTINGS_COMMAND,
   OPEN_LINK_POPUP_COMMAND,
   OPEN_SETTINGS_COMMAND,
@@ -55,6 +60,7 @@ const COMMANDS: Record<string, LexicalCommand<any>> = {
   toggleKeyboardMap: TOGGLE_KEYBOARD_MAP_COMMAND,
   formatElement: FORMAT_ELEMENT_COMMAND,
   formatText: FORMAT_TEXT_COMMAND,
+  clearFormatting: CLEAR_FORMATTING_COMMAND,
   undo: UNDO_COMMAND,
   redo: REDO_COMMAND,
   insertMath: INSERT_MATH_COMMAND,
@@ -65,6 +71,9 @@ const COMMANDS: Record<string, LexicalCommand<any>> = {
   insertTypstCode: INSERT_TYPST_CODE_COMMAND,
   insertImage: INSERT_IMAGE_COMMAND,
   insertFunctionCall: INSERT_FUNCTION_CALL_COMMAND,
+  insertQuote: INSERT_QUOTE_COMMAND,
+  insertCodeBlock: INSERT_CODE_BLOCK_COMMAND,
+  insertHeading: INSERT_HEADING_COMMAND,
   toggleMathInline: TOGGLE_MATH_INLINE_COMMAND,
   math: MATH_COMMAND,
   indent: INDENT_CONTENT_COMMAND,
@@ -74,13 +83,14 @@ const COMMANDS: Record<string, LexicalCommand<any>> = {
   tableInsertColumnRight: TABLE_INSERT_COLUMN_RIGHT_COMMAND,
   tableRemoveRow: TABLE_REMOVE_ROW_COMMAND,
   tableRemoveColumn: TABLE_REMOVE_COLUMN_COMMAND,
-  toggleLink: TOGGLE_LINK_COMMAND,
+  setLink: TOGGLE_LINK_COMMAND,
   openLinkPopup: OPEN_LINK_POPUP_COMMAND,
   fileOpen: FILE_OPEN_COMMAND,
   fileNew: FILE_NEW_COMMAND,
   fileNewFromTemplate: FILE_NEW_FROM_TEMPLATE_COMMAND,
   fileSave: FILE_SAVE_COMMAND,
   fileSaveAs: FILE_SAVE_AS_COMMAND,
+  fileExport: FILE_EXPORT_COMMAND,
   fileClose: FILE_CLOSE_COMMAND,
   filePreview: FILE_PREVIEW_COMMAND,
   openSettings: OPEN_SETTINGS_COMMAND,

src/components/CommandActionIcon.tsx

@@ -1,28 +1,37 @@
 import { ActionIcon, ActionIconProps, Tooltip } from "@mantine/core"
+import { forwardRef } from "react"
 import { executeCommandSequence } from "../commands"
 import { setLocalStorage } from "../utilities/hooks"
 
-const CommandActionIcon = (
-  props: ActionIconProps & { component?: any; command: string; label?: string },
-) => {
-  const icon = (
-    <ActionIcon
-      onMouseEnter={() => setLocalStorage("Hover Command", props.command)}
-      onMouseLeave={() => setLocalStorage("Hover Command", null)}
-      onClick={(e: any) => {
-        e.preventDefault()
-        e.stopPropagation()
-        executeCommandSequence(props.command)
-      }}
-      {...props}
-    />
-  )
+const CommandActionIcon = forwardRef(
+  (
+    props: ActionIconProps & {
+      component?: any
+      command: string
+      label?: string
+    },
+    ref,
+  ) => {
+    const icon = (
+      <ActionIcon
+        ref={ref}
+        onMouseEnter={() => setLocalStorage("Hover Command", props.command)}
+        onMouseLeave={() => setLocalStorage("Hover Command", null)}
+        onClick={(e: any) => {
+          e.preventDefault()
+          e.stopPropagation()
+          executeCommandSequence(props.command)
+        }}
+        {...props}
+      />
+    )
 
-  if (props.label) {
-    return <Tooltip label={props.label}>{icon}</Tooltip>
-  }
+    if (props.label) {
+      return <Tooltip label={props.label}>{icon}</Tooltip>
+    }
 
-  return icon
-}
+    return icon
+  },
+)
 
 export default CommandActionIcon

src/components/plugins/ImagePlugin.tsx

@@ -1,7 +1,7 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
 import { $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical"
 import { useEffect, useState } from "react"
-import { readImage } from "../../backend"
+import { insertImage, readImage } from "../../backend"
 import { getCurrentDocument } from "../../utilities"
 import { $createImageNode, INSERT_IMAGE_COMMAND } from "./image"
 
@@ -24,6 +24,11 @@ const ImagePlugin = () => {
     return editor.registerCommand(
       INSERT_IMAGE_COMMAND,
       (src) => {
+        if (src === undefined) {
+          insertImage()
+          return true
+        }
+
         $insertNodes([$createImageNode(src)])
         return true
       },