[6.x] Cleanup Overtype overrides

package.json

@@ -79,7 +79,7 @@
     "axios": "^1.17.0",
     "laravel-vite-plugin": "^3.1.0",
     "lit": "^3.3.2",
-    "overtype": "^2.3.10",
+    "overtype": "^2.4.0",
     "tailwindcss": "^4.2.4",
     "vue": "^3.5.33"
   }

resources/js/modules/markdown-field/MarkdownField.ts

@@ -17,12 +17,7 @@ import {
 } from './behaviors/preview';
 import {registerShortcutBehavior} from './behaviors/shortcuts';
 import {themeOptions} from './behaviors/theme';
-import {
-  replaceMarkdownGuideButton,
-  syncToolbarKeyboardNavigation,
-  syncToolbarButtonStates,
-  toolbarItems,
-} from './behaviors/toolbar';
+import {replaceMarkdownGuideButton, toolbarItems} from './behaviors/toolbar';
 import {fileUploadOptions} from './behaviors/uploads';
 import markdownIcon from '@icons/brands/markdown.svg?raw';
 import './MarkdownField.css';
@@ -186,8 +181,6 @@ class MarkdownField extends LitElement {
       () => this.linkPopoverController?.destroy(),
       ...(charCounterCleanup ? [charCounterCleanup] : []),
       replaceMarkdownGuideButton(editor),
-      syncToolbarKeyboardNavigation(editor),
-      syncToolbarButtonStates(editor, previewController),
       registerLinkPasteBehavior(editor, previewController),
       registerShortcutBehavior(editor, previewController),
     ];

resources/js/modules/markdown-field/behaviors/shortcuts.ts

@@ -7,13 +7,7 @@ export function registerShortcutBehavior(
   preview: PreviewController
 ): () => void {
   async function handleKeydown(event: KeyboardEvent): Promise<void> {
-    if (event.key === 'Tab') {
-      event.stopPropagation();
-
-      return;
-    }
-
-    if (!isModifierKeyPressed(event)) {
+    if (event.defaultPrevented || !isModifierKeyPressed(event)) {
       return;
     }
 
@@ -25,18 +19,6 @@ export function registerShortcutBehavior(
 
     event.preventDefault();
 
-    if (action === 'indent') {
-      indentSelection(editor.textarea);
-
-      return;
-    }
-
-    if (action === 'outdent') {
-      outdentSelection(editor.textarea);
-
-      return;
-    }
-
     if (action === 'togglePreview') {
       await preview.toggle();
 
@@ -55,24 +37,11 @@ export function registerShortcutBehavior(
   };
 }
 
-type ShortcutAction =
-  | 'indent'
-  | 'outdent'
-  | 'toggleCode'
-  | 'togglePreview'
-  | 'toggleQuote';
+type ShortcutAction = 'toggleCode' | 'togglePreview' | 'toggleQuote';
 
 function shortcutAction(event: KeyboardEvent): ShortcutAction | null {
   const key = event.key.toLowerCase();
 
-  if (key === ']') {
-    return 'indent';
-  }
-
-  if (key === '[') {
-    return 'outdent';
-  }
-
   if (key === 'e' && !event.shiftKey) {
     return 'toggleCode';
   }
@@ -87,42 +56,3 @@ function shortcutAction(event: KeyboardEvent): ShortcutAction | null {
 
   return null;
 }
-
-function indentSelection(textarea: HTMLTextAreaElement): void {
-  replaceSelectedLines(textarea, (line) => `  ${line}`);
-}
-
-function outdentSelection(textarea: HTMLTextAreaElement): void {
-  replaceSelectedLines(textarea, (line) => line.replace(/^( {1,2}|\t)/, ''));
-}
-
-function replaceSelectedLines(
-  textarea: HTMLTextAreaElement,
-  transformLine: (line: string) => string
-): void {
-  const {selectionEnd, selectionStart, value} = textarea;
-  const lineStart = value.lastIndexOf('\n', selectionStart - 1) + 1;
-  const lineEndOffset = value.indexOf(
-    '\n',
-    effectiveSelectionEnd(value, selectionStart, selectionEnd)
-  );
-  const lineEnd = lineEndOffset === -1 ? value.length : lineEndOffset;
-  const replacement = value
-    .slice(lineStart, lineEnd)
-    .split('\n')
-    .map(transformLine)
-    .join('\n');
-
-  textarea.setRangeText(replacement, lineStart, lineEnd, 'preserve');
-  textarea.dispatchEvent(new Event('input', {bubbles: true}));
-}
-
-function effectiveSelectionEnd(
-  value: string,
-  selectionStart: number,
-  selectionEnd: number
-): number {
-  return selectionEnd > selectionStart && value[selectionEnd - 1] === '\n'
-    ? selectionEnd - 1
-    : selectionEnd;
-}

resources/js/modules/markdown-field/behaviors/toolbar/index.ts

@@ -1,4 +1,2 @@
-export {syncToolbarButtonStates} from './active-states';
 export {replaceMarkdownGuideButton} from './guide-link';
 export {toolbarItems} from './items';
-export {syncToolbarKeyboardNavigation} from './keyboard';

resources/js/modules/markdown-field/behaviors/toolbar/items.ts

@@ -20,6 +20,7 @@ type ToolbarCallbacks = {
 };
 
 type ToolbarAction = NonNullable<ToolbarButton['action']>;
+type ToolbarActiveState = NonNullable<ToolbarButton['isActive']>;
 
 const strikethroughFormat = {
   prefix: '~~',
@@ -78,9 +79,17 @@ function toolbarButtonGroups(
             strikethroughFormat
           );
           editor.textarea.dispatchEvent(new Event('input', {bubbles: true}));
-        }
+        },
+        undefined,
+        ({editor}) => hasSurroundingMarker(editor.textarea, '~~')
+      ),
+      customizeToolbarButton(
+        toolbarButtons.code,
+        t('Code'),
+        'code',
+        undefined,
+        ({activeFormats}) => activeFormats.includes('code')
       ),
-      customizeToolbarButton(toolbarButtons.code, t('Code'), 'code'),
     ],
     [
       customizeToolbarButton(toolbarButtons.h1, t('Heading 1'), 'h1'),
@@ -145,21 +154,30 @@ function toolbarButtonGroups(
 }
 
 function headingButton(level: 4 | 5 | 6, title: string): CraftToolbarButton {
-  return customToolbarButton(`h${level}`, `h${level}`, title, ({editor}) => {
-    markdownActions.insertHeader(editor.textarea, level, true);
-    editor.textarea.dispatchEvent(new Event('input', {bubbles: true}));
-  });
+  return customToolbarButton(
+    `h${level}`,
+    `h${level}`,
+    title,
+    ({editor}) => {
+      markdownActions.insertHeader(editor.textarea, level, true);
+      editor.textarea.dispatchEvent(new Event('input', {bubbles: true}));
+    },
+    undefined,
+    ({editor}) => headingLevel(editor.textarea) === level
+  );
 }
 
 function customizeToolbarButton(
   button: ToolbarButton,
   title: string,
   icon: string,
-  optionName = button.name
+  optionName = button.name,
+  isActive = button.isActive
 ): CraftToolbarButton {
   return {
     ...button,
     icon: customIcons[icon] ?? button.icon,
+    isActive,
     optionName,
     title,
   };
@@ -170,13 +188,39 @@ function customToolbarButton(
   icon: string,
   title: string,
   action: ToolbarAction,
-  actionId?: string
+  actionId?: string,
+  isActive?: ToolbarActiveState
 ): CraftToolbarButton {
   return {
     actionId,
     action,
     icon: customIcons[icon] ?? '',
+    isActive,
     name,
     title,
   };
 }
+
+function headingLevel(textarea: HTMLTextAreaElement): number {
+  const {selectionStart, value} = textarea;
+  const lineStart =
+    value.lastIndexOf('\n', Math.max(0, selectionStart - 1)) + 1;
+  const nextLineBreak = value.indexOf('\n', selectionStart);
+  const lineEnd = nextLineBreak === -1 ? value.length : nextLineBreak;
+
+  return value.slice(lineStart, lineEnd).match(/^(#{1,6})\s/)?.[1]?.length ?? 0;
+}
+
+function hasSurroundingMarker(
+  textarea: HTMLTextAreaElement,
+  marker: string
+): boolean {
+  const {selectionEnd, selectionStart, value} = textarea;
+  const beforeSelection = value.slice(0, selectionStart);
+  const afterSelection = value.slice(selectionEnd);
+
+  return (
+    (beforeSelection.split(marker).length - 1) % 2 === 1 &&
+    afterSelection.includes(marker)
+  );
+}