feat(site-builder): add insert/colour/format toolbar to the Edit HTML modal

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-08-09 06:31:55 -07:00
parent b670b436c3
commit 66db1db507
3 changed files with 168 additions and 3 deletions
@@ -0,0 +1,92 @@
+import React from 'react';
+import type { CodeEditorHandle } from '../../../ui/CodeEditor';
+
+/**
+ * Snippet buttons for the Edit HTML modal. `caret` is the offset from the
+ * start of the inserted text where the caret should land -- i.e. between the
+ * open and close tags, so the next keystroke types content rather than
+ * landing after the closing tag.
+ */
+export const SNIPPETS: { label: string; icon: string; title: string; text: string; caret: number }[] = [
+  { label: 'div',     icon: 'fa-square-o',   title: 'Insert a div',        text: '<div></div>',   caret: 5 },
+  { label: 'section', icon: 'fa-window-maximize', title: 'Insert a section', text: '<section></section>', caret: 9 },
+  { label: 'h2',      icon: 'fa-header',     title: 'Insert a heading',    text: '<h2></h2>',     caret: 4 },
+  { label: 'p',       icon: 'fa-paragraph',  title: 'Insert a paragraph',  text: '<p></p>',       caret: 3 },
+  { label: 'a',       icon: 'fa-link',       title: 'Insert a link',       text: '<a href="#"></a>', caret: 12 },
+  { label: 'ul',      icon: 'fa-list-ul',    title: 'Insert a list',       text: '<ul>\n  <li></li>\n</ul>', caret: 11 },
+  { label: 'img',     icon: 'fa-image',      title: 'Insert an image',     text: '<img src="" alt="">', caret: 10 },
+];
+
+const btnStyle: React.CSSProperties = {
+  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+  minWidth: 28, height: 28, padding: '0 7px',
+  background: '#27272a', color: '#e4e4e7',
+  border: '1px solid #3f3f46', borderRadius: 5,
+  fontSize: 11, cursor: 'pointer',
+};
+
+export const HtmlToolbar: React.FC<{
+  editorRef: React.RefObject<CodeEditorHandle>;
+  onFormat: () => void;
+}> = ({ editorRef, onFormat }) => {
+  const insert = (text: string, caret?: number): void => {
+    // The ref is null until CodeEditor mounts; clicking early must no-op.
+    // Only forward a second argument when a caret offset was actually
+    // given -- `insertAtCursor(text, undefined)` is a distinct call from
+    // `insertAtCursor(text)` (an explicit undefined still occupies the
+    // argument list), and the colour control relies on the latter so the
+    // caret lands at the end of the inserted attribute, not mid-string.
+    if (caret === undefined) {
+      editorRef.current?.insertAtCursor(text);
+    } else {
+      editorRef.current?.insertAtCursor(text, caret);
+    }
+  };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label="HTML editing tools"
+      style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 10, alignItems: 'center' }}
+    >
+      {SNIPPETS.map((s) => (
+        <button
+          key={s.label}
+          type="button"
+          data-snippet={s.label}
+          title={s.title}
+          aria-label={s.title}
+          style={btnStyle}
+          onClick={() => insert(s.text, s.caret)}
+        >
+          <i className={`fa ${s.icon}`} aria-hidden="true" />
+        </button>
+      ))}
+
+      <span style={{ width: 1, height: 20, background: '#3f3f46', margin: '0 3px' }} aria-hidden="true" />
+
+      <label
+        title="Insert a colour style attribute at the cursor"
+        style={{ ...btnStyle, padding: 0, overflow: 'hidden', position: 'relative' }}
+      >
+        <input
+          type="color"
+          aria-label="Insert colour"
+          defaultValue="#3b82f6"
+          onInput={(e) => insert(` style="color: ${(e.target as HTMLInputElement).value}"`)}
+          style={{ width: 40, height: 34, border: 'none', background: 'none', cursor: 'pointer', padding: 0 }}
+        />
+      </label>
+
+      <button
+        type="button"
+        data-action="format"
+        title="Re-indent the markup"
+        style={{ ...btnStyle, marginLeft: 'auto', fontWeight: 600, gap: 5 }}
+        onClick={onFormat}
+      >
+        <i className="fa fa-indent" aria-hidden="true" /> Format
+      </button>
+    </div>
+  );
+};