shadowdaoandClaude Opus 5
66db1db507
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
93 lines
3.7 KiB
TypeScript
93 lines
3.7 KiB
TypeScript
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>
|
|
);
|
|
};
|