bookish-press 0.4.0 → 0.4.3

package/components/editor/Toolbar.svelte

@@ -1,63 +1,81 @@
-<script>import commands from "./Commands";
-import TextNode from "../../models/chapter/TextNode";
-import AtomNode from "../../models/chapter/AtomNode";
-import LinkNode from "../../models/chapter/LinkNode";
-import LabelNode from "../../models/chapter/LabelNode";
-import InlineCodeNode from "../../models/chapter/InlineCodeNode";
-import CitationsNode from "../../models/chapter/CitationsNode";
-import DefinitionNode from "../../models/chapter/DefinitionNode";
-import CodeNode from "../../models/chapter/CodeNode";
-import CalloutNode from "../../models/chapter/CalloutNode";
-import EmbedNode from "../../models/chapter/EmbedNode";
-import QuoteNode from "../../models/chapter/QuoteNode";
-import LabelEditor from "./LabelEditor.svelte";
-import InlineCodeEditor from "./InlineCodeEditor.svelte";
-import CitationsEditor from "./CitationsEditor.svelte";
-import LinkEditor from "./LinkEditor.svelte";
-import DefinitionEditor from "./DefinitionEditor.svelte";
-import CaptionedCodeEditor from "./CaptionedCodeEditor.svelte";
-import CalloutEditor from "./CalloutEditor.svelte";
-import QuoteEditor from "./QuoteEditor.svelte";
-import EmbedEditor from "./EmbedEditor.svelte";
-import ToolbarGroup from "./ToolbarGroup.svelte";
-import ToolbarIcon from "./ToolbarIcon.svelte";
-import { onMount } from "svelte";
+<script>import commands from './Commands';
+import TextNode from '../../models/chapter/TextNode';
+import AtomNode from '../../models/chapter/AtomNode';
+import LinkNode from '../../models/chapter/LinkNode';
+import LabelNode from '../../models/chapter/LabelNode';
+import InlineCodeNode from '../../models/chapter/InlineCodeNode';
+import CitationsNode from '../../models/chapter/CitationsNode';
+import DefinitionNode from '../../models/chapter/DefinitionNode';
+import CodeNode from '../../models/chapter/CodeNode';
+import CalloutNode from '../../models/chapter/CalloutNode';
+import EmbedNode from '../../models/chapter/EmbedNode';
+import QuoteNode from '../../models/chapter/QuoteNode';
+import LabelEditor from './LabelEditor.svelte';
+import InlineCodeEditor from './InlineCodeEditor.svelte';
+import CitationsEditor from './CitationsEditor.svelte';
+import LinkEditor from './LinkEditor.svelte';
+import DefinitionEditor from './DefinitionEditor.svelte';
+import CaptionedCodeEditor from './CaptionedCodeEditor.svelte';
+import CalloutEditor from './CalloutEditor.svelte';
+import QuoteEditor from './QuoteEditor.svelte';
+import EmbedEditor from './EmbedEditor.svelte';
+import TableEditor from './TableEditor.svelte';
+import ToolbarGroup from './ToolbarGroup.svelte';
+import Icon from './Icon.svelte';
+import Button from '../app/Button.svelte';
+import AnnotateIcon from './icons/annotate.svg?raw';
+import BlockIcon from './icons/block.svg?raw';
+import ClipboardIcon from './icons/clipboard.svg?raw';
+import LevelIcon from './icons/level.svg?raw';
+import ListIcon from './icons/list.svg?raw';
+import TextIcon from './icons/text.svg?raw';
+import TimeIcon from './icons/time.svg?raw';
+import TableIcon from './icons/table.svg?raw';
+import LinkIcon from './icons/link.svg?raw';
+import LabelIcon from './icons/label.svg?raw';
+import CitationIcon from './icons/citation.svg?raw';
+import DefineIcon from './icons/define.svg?raw';
+import CodeIcon from './icons/code.svg?raw';
+import CalloutIcon from './icons/callout.svg?raw';
+import QuoteIcon from './icons/quote.svg?raw';
+import MediaIcon from './icons/media.svg?raw';
+import TableNode from '../../models/chapter/TableNode';
+import { slide } from 'svelte/transition';
 const keyLabels = {
-    "Digit0": "0",
-    "Digit1": "1",
-    "Digit2": "2",
-    "Digit3": "3",
-    "ArrowDown": "↓",
-    "ArrowUp": "↑",
-    "ArrowLeft": "←",
-    "ArrowRight": "→",
-    "Backspace": "\u232B",
+    Digit0: '0',
+    Digit1: '1',
+    Digit2: '2',
+    Digit3: '3',
+    ArrowDown: '↓',
+    ArrowUp: '↑',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Backspace: '\u232B',
 };
 const categoryOrder = {
-    "navigation": 1,
-    "selection": 2,
-    "text": 3,
-    "clipboard": 4,
-    "annotation": 5,
-    "paragraph": 6,
-    "level": 7,
-    "list": 8,
-    "table": 9,
-    "block": 10,
+    navigation: 1,
+    selection: 2,
+    text: 3,
+    clipboard: 4,
+    annotation: 5,
+    paragraph: 6,
+    level: 7,
+    list: 8,
+    table: 9,
+    block: 10,
 };
 const categoryIcons = {
-    "text": "text.svg",
-    "clipboard": "scissors.svg",
-    "annotation": "hash.svg",
-    "level": "level.svg",
-    "block": "block.svg",
-    "list": "list.svg",
-    "table": "▦",
-    "history": "\u2026"
+    text: TextIcon,
+    clipboard: ClipboardIcon,
+    annotation: AnnotateIcon,
+    level: LevelIcon,
+    block: BlockIcon,
+    list: ListIcon,
+    table: TableIcon,
+    history: TimeIcon,
 };
-export let context = undefined;
-export let executor = undefined;
-export let visible = false;
+export let caret;
+$: context = caret.context;
 $: chapter = context?.root;
 let element = null;
 let categories = undefined;
@@ -66,57 +84,63 @@ let metaNode = undefined;
 let calloutNode = undefined;
 let quoteNode = undefined;
 let embedNode = undefined;
-$: isVisible = visible || containsFocus();
-// Listen to focus changes to decide whether the toolbar is visible.
-onMount(() => {
-    window.addEventListener("focus", updateVisible);
-    window.addEventListener("blur", updateVisible);
-    return () => {
-        window.removeEventListener("focus", updateVisible);
-        window.removeEventListener("blur", updateVisible);
-    };
-});
-function containsFocus() { return element !== null && element.contains(document.activeElement); }
-function updateVisible() {
-    isVisible = visible || containsFocus();
-}
+let tableNode = undefined;
 function getShortcutDescription(command) {
-    const macOS = navigator.platform.indexOf('Mac') > -1;
-    const controlSymbol = macOS ? "\u2318" : "Ctrl+";
-    const altSymbol = macOS ? "\u2325" : "Alt+";
-    const key = command.key ? (Array.isArray(command.key) ? command.key.join("/") : command.key) : command.code ? command.code : "any";
-    const keyLabel = (key in keyLabels ? keyLabels[key] : key).toLocaleUpperCase();
-    return `${command.control ? controlSymbol : ""}${command.alt ? altSymbol : ""}${command.shift ? "\u21E7" : ""}${keyLabel}`;
+    const macOS = navigator.userAgent.indexOf('Mac') >= 0;
+    const controlSymbol = macOS ? '\u2318' : 'Ctrl+';
+    const altSymbol = macOS ? '\u2325' : 'Alt+';
+    const key = command.key
+        ? Array.isArray(command.key)
+            ? command.key.join('/')
+            : command.key
+        : command.code
+            ? command.code
+            : 'any';
+    const keyLabel = (typeof key === 'string'
+        ? key in keyLabels
+            ? keyLabels[key]
+            : key
+        : '—').toLocaleUpperCase();
+    return `${command.control ? controlSymbol : ''}${command.alt ? altSymbol : ''}${command.shift ? '\u21E7' : ''}${keyLabel}`;
 }
 // Update the above when the dependencies below change.
 $: {
     if (context !== undefined && chapter) {
         // Filter the commands by those interactive with a mouse and active.
-        const visible = commands.filter(command => command.visible === true || (context && command.visible instanceof Function && command.visible(context)));
+        const visible = commands.filter((command) => command.visible === true ||
+            (context &&
+                command.visible instanceof Function &&
+                command.visible(context)));
         // Extract the active categories and sort them
-        categories =
-            Array.from(new Set(commands.map(command => command.category)))
-                .sort((a, b) => a in categoryOrder && b in categoryOrder ? categoryOrder[a] - categoryOrder[b] : 0);
+        categories = Array.from(new Set(commands.map((command) => command.category))).sort((a, b) => a in categoryOrder && b in categoryOrder
+            ? categoryOrder[a] - categoryOrder[b]
+            : 0);
         // Make a list for each category of commands
         commandsByCategory = {};
-        categories.forEach(cat => {
+        categories.forEach((cat) => {
             if (commandsByCategory)
-                commandsByCategory[cat] = visible.filter(command => command.category === cat);
+                commandsByCategory[cat] = visible.filter((command) => command.category === cat);
         });
         const caretNode = context.start.node;
         metaNode =
-            caretNode instanceof AtomNode ? caretNode :
-                caretNode instanceof TextNode ? caretNode.getParent(chapter) :
-                    undefined;
-        calloutNode = caretNode.getClosestParentMatching(chapter, p => p instanceof CalloutNode);
-        quoteNode = caretNode.getClosestParentMatching(chapter, p => p instanceof QuoteNode);
-        embedNode = caretNode.getClosestParentMatching(chapter, p => p instanceof EmbedNode);
+            caretNode instanceof AtomNode
+                ? caretNode
+                : caretNode instanceof TextNode
+                    ? caretNode.getParent(chapter)
+                    : undefined;
+        calloutNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof CalloutNode);
+        quoteNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof QuoteNode);
+        embedNode =
+            caretNode instanceof EmbedNode
+                ? caretNode
+                : caretNode.getClosestParentMatching(chapter, (p) => p instanceof EmbedNode);
+        tableNode = caretNode.getClosestParentMatching(chapter, (p) => p instanceof TableNode);
     }
 }
 function handleKeyPress(event) {
     // Return focus to the editor if someone presses an unhandled enter
-    if (event.key === "Enter" && element) {
-        const editor = element.closest(".bookish-editor");
+    if ((event.key === 'Escape' || event.key === 'Enter') && element) {
+        const editor = element.closest('.bookish-editor');
         if (editor instanceof HTMLElement) {
             event.stopPropagation();
             editor.focus();
@@ -127,76 +151,99 @@ function handleKeyPress(event) {
 </script>
 
 {#if chapter}
-    <section 
-        class="bookish-editor-toolbar" 
-        on:keypress={handleKeyPress} 
-        style={`margin: ${isVisible ? "0px" : "-20em"};`} 
+    <section
+        class="bookish-editor-toolbar"
         bind:this={element}
-        on:mousedown|stopPropagation={ () => element?.focus() }
-        tabIndex=0
+        on:keypress={handleKeyPress}
+        on:keydown={handleKeyPress}
+        on:mousedown|stopPropagation={() => element?.focus()}
+        tabIndex="0"
+        transition:slide={{ duration: 200 }}
     >
-        {#if context && categories && executor}
-            {#each categories as cat }
-                {#if commandsByCategory[cat].length > 0 }
-                    <ToolbarGroup linebreak={false} icon={ cat in categoryIcons ? categoryIcons[cat] : cat.charAt(0).toUpperCase() + cat.slice(1) }>
-                        {#each commandsByCategory[cat] as command }
-                            <button 
-                                disabled={command.active === false || (command.active instanceof Function && command.active.call(undefined, context) === false)}
-                                title={command.description + " " + getShortcutDescription(command)}
-                                tabIndex=0
-                                on:click|stopPropagation|preventDefault={() => executor?.call(undefined, command, "")}
-                                on:keypress={event => event.key === " " || event.key === "Enter" ? executor?.call(undefined, command, "") : undefined }
+        {#if context && categories}
+            {#each categories as cat}
+                {#if commandsByCategory[cat].length > 0}
+                    <ToolbarGroup
+                        icon={cat in categoryIcons
+                            ? categoryIcons[cat]
+                            : cat.charAt(0).toUpperCase() + cat.slice(1)}
+                    >
+                        {#each commandsByCategory[cat] as command}
+                            <Button
+                                disabled={command.active === false ||
+                                    (command.active instanceof Function &&
+                                        command.active.call(
+                                            undefined,
+                                            context
+                                        ) === false)}
+                                tooltip={command.description +
+                                    ' ' +
+                                    getShortcutDescription(command)}
+                                tabIndex="0"
+                                command={() =>
+                                    caret?.executor.call(
+                                        undefined,
+                                        command,
+                                        ''
+                                    )}
                             >
-                                {#if command.icon }
-                                    <ToolbarIcon name={command.icon}/>
-                                {:else if command.label }
-                                    {command.label}
-                                {:else}
-                                    {command.description }
-                                {/if}
-                            </button>
+                                <Icon icon={command.icon} />
+                            </Button>
                         {/each}
+                        {#if cat === 'table' && tableNode}
+                            <TableEditor table={tableNode} />
+                        {/if}
                     </ToolbarGroup>
                 {/if}
             {/each}
         {/if}
-        {#if metaNode instanceof LinkNode}<ToolbarGroup icon="link.svg"><LinkEditor link={metaNode}/></ToolbarGroup>{/if}
-        {#if metaNode instanceof LabelNode}<ToolbarGroup icon="•"><LabelEditor label={metaNode}/></ToolbarGroup>{/if}
-        {#if metaNode instanceof InlineCodeNode}<ToolbarGroup icon="code.svg"><InlineCodeEditor code={metaNode}/></ToolbarGroup>{/if}
-        {#if metaNode instanceof CitationsNode}<ToolbarGroup icon="¹"><CitationsEditor citations={metaNode}/></ToolbarGroup>{/if}
-        {#if metaNode instanceof DefinitionNode}<ToolbarGroup icon="Aa"><DefinitionEditor definition={metaNode}/></ToolbarGroup>{/if}
-        {#if metaNode instanceof CodeNode && context}<ToolbarGroup icon="code.svg"><CaptionedCodeEditor code={metaNode}/></ToolbarGroup>{/if}
-        {#if calloutNode}<ToolbarGroup icon="🄰"><CalloutEditor callout={calloutNode} /></ToolbarGroup>{/if}
-        {#if quoteNode}<ToolbarGroup icon="quote.svg"><QuoteEditor quote={quoteNode} /></ToolbarGroup>{/if}
-        {#if embedNode}<ToolbarGroup linebreak icon="media.svg"><EmbedEditor embed={embedNode} /></ToolbarGroup>{/if}
+        {#if metaNode instanceof LinkNode}<ToolbarGroup icon={LinkIcon}
+                ><LinkEditor link={metaNode} /></ToolbarGroup
+            >
+        {:else if metaNode instanceof LabelNode}<ToolbarGroup icon={LabelIcon}
+                ><LabelEditor label={metaNode} /></ToolbarGroup
+            >
+        {:else if metaNode instanceof InlineCodeNode}<ToolbarGroup
+                icon={CodeIcon}
+                ><InlineCodeEditor code={metaNode} /></ToolbarGroup
+            >
+        {:else if metaNode instanceof CitationsNode}<ToolbarGroup
+                icon={CitationIcon}
+                ><CitationsEditor citations={metaNode} /></ToolbarGroup
+            >
+        {:else if metaNode instanceof DefinitionNode}<ToolbarGroup
+                icon={DefineIcon}
+                ><DefinitionEditor definition={metaNode} /></ToolbarGroup
+            >
+        {:else if metaNode instanceof CodeNode && context}<ToolbarGroup
+                icon={CodeIcon}
+                ><CaptionedCodeEditor code={metaNode} /></ToolbarGroup
+            >
+        {:else if calloutNode}<ToolbarGroup icon={CalloutIcon}
+                ><CalloutEditor callout={calloutNode} /></ToolbarGroup
+            >
+        {:else if quoteNode}<ToolbarGroup icon={QuoteIcon}
+                ><QuoteEditor quote={quoteNode} /></ToolbarGroup
+            >
+        {:else if embedNode}<ToolbarGroup icon={MediaIcon}
+                ><EmbedEditor embed={embedNode} /></ToolbarGroup
+            >
+        {/if}
     </section>
 {/if}
 
 <style>
-
     .bookish-editor-toolbar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: baseline;
         background: var(--bookish-background-color);
-        border: var(--bookish-app-chrome-border-width) solid var(--bookish-app-chrome-border-color);
-        padding: var(--bookish-app-chrome-padding);
-        font-family: var(--bookish-app-chrome-font-family);
-        font-size: var(--bookish-app-chrome-font-size);
-        z-index: 2;
-        transition: top 1s;
+        font-family: var(--app-font);
+        font-size: var(--app-chrome-font-size);
     }
 
-    .bookish-editor-toolbar :global(img) {
-        width: 1em;
-        height: 1em;
+    .bookish-editor-toolbar:focus {
+        outline: 2px solid var(--app-interactive-color);
     }
-
-    .bookish-editor-toolbar :global(hr) {
-        margin-top: var(--bookish-app-chrome-padding);
-        margin-bottom: var(--bookish-app-chrome-padding);
-        line-height: 1em;
-    }
-
-</style>
+</style>

package/components/editor/Toolbar.svelte.d.ts

@@ -1,20 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
-import type Command from "./Command";
-import type CaretState from "./CaretState";
+import type CaretState from './CaretState';
 declare const __propDef: {
     props: {
-        context?: CaretState | undefined;
-        executor?: ((command: Command, key: string) => void) | undefined;
-        visible?: boolean | undefined;
+        caret: CaretState;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type ToolbarProps = typeof __propDef.props;
-export declare type ToolbarEvents = typeof __propDef.events;
-export declare type ToolbarSlots = typeof __propDef.slots;
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
 export default class Toolbar extends SvelteComponentTyped<ToolbarProps, ToolbarEvents, ToolbarSlots> {
 }
 export {};

package/components/editor/ToolbarGroup.svelte

@@ -1,41 +1,35 @@
-<script>import ToolbarIcon from "./ToolbarIcon.svelte";
-export let linebreak = false;
+<script>import ToolbarIcon from './Icon.svelte';
+import ToolbarSpacer from './ToolbarSpacer.svelte';
 export let icon;
 </script>
 
-{#if linebreak }<br/>{/if}
-<span class="bookish-editor-toolbar-group">
-    <ToolbarIcon name={icon}/><slot></slot>
-</span>
+<div class="toolbar-group">
+    <ToolbarIcon {icon} /><ToolbarSpacer /><slot />
+</div>
 
 <style>
-    .bookish-editor-toolbar-group {
+    .toolbar-group {
         display: inline-block;
-        margin-right: calc(2 * var(--bookish-app-chrome-padding));
-        margin-bottom: var(--bookish-app-chrome-padding);
+        margin-right: calc(2 * var(--app-chrome-padding));
     }
 
-    .bookish-editor-toolbar-group :global(button) {
-        vertical-align: middle;
-        height: 2.25em;
-    }
-
-    .bookish-editor-toolbar-group :global(button:first-of-type) {
+    .toolbar-group :global(button:first-of-type) {
         border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
-    .bookish-editor-toolbar-group :global(button:last-child) {
+    .toolbar-group :global(button:last-of-type) {
         border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
     }
 
-    .bookish-editor-toolbar-group :global(button:not(:first-of-type):not(:last-child)) {
+    .toolbar-group :global(button:not(:first-of-type):not(:last-of-type)) {
         border-radius: 0;
     }
 
-    .bookish-editor-toolbar-group :global(input), 
-    .bookish-editor-toolbar-group :global(select) {
-        margin-left: var(--bookish-app-chrome-padding);
-        margin-right: var(--bookish-app-chrome-padding);
+    .toolbar-group :global(input),
+    .toolbar-group :global(select) {
+        margin-left: var(--app-chrome-padding);
+        margin-right: var(--app-chrome-padding);
     }
-
-</style>
+</style>

package/components/editor/ToolbarGroup.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        linebreak?: boolean | undefined;
         icon: string;
     };
     events: {
@@ -11,9 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ToolbarGroupProps = typeof __propDef.props;
-export declare type ToolbarGroupEvents = typeof __propDef.events;
-export declare type ToolbarGroupSlots = typeof __propDef.slots;
+export type ToolbarGroupProps = typeof __propDef.props;
+export type ToolbarGroupEvents = typeof __propDef.events;
+export type ToolbarGroupSlots = typeof __propDef.slots;
 export default class ToolbarGroup extends SvelteComponentTyped<ToolbarGroupProps, ToolbarGroupEvents, ToolbarGroupSlots> {
 }
 export {};

package/components/editor/ToolbarSpacer.svelte

@@ -1 +1,8 @@
-<span style="display: inline-block, width: 1em"></span>
+<span />
+
+<style>
+    span {
+        display: inline-block;
+        width: var(--app-chrome-padding);
+    }
+</style>

package/components/editor/ToolbarSpacer.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  ToolbarSpacerProps */
 /** @typedef {typeof __propDef.events}  ToolbarSpacerEvents */
 /** @typedef {typeof __propDef.slots}  ToolbarSpacerSlots */
-export default class ToolbarSpacer extends SvelteComponentTyped<{}, {
+export default class ToolbarSpacer extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
@@ -10,7 +12,9 @@ export type ToolbarSpacerEvents = typeof __propDef.events;
 export type ToolbarSpacerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/editor/URLEditor.svelte

@@ -1,15 +1,13 @@
-<script>import TextEditor from "./TextEditor.svelte";
+<script>import TextEditor from './TextEditor.svelte';
 export let url;
 export let validator;
 export let edit;
 </script>
 
 <TextEditor
-    placeholder="url" 
-    startText={url} 
+    placeholder="url"
+    text={url}
     label="URL editor"
-    valid={ url => validator(url) }
-    save={ url => edit(url) }
-    width={20}
-    clip={true}
-/>
+    valid={(url) => validator(url)}
+    save={(url) => edit(url)}
+/>

package/components/editor/URLEditor.svelte.d.ts

@@ -10,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type UrlEditorProps = typeof __propDef.props;
-export declare type UrlEditorEvents = typeof __propDef.events;
-export declare type UrlEditorSlots = typeof __propDef.slots;
+export type UrlEditorProps = typeof __propDef.props;
+export type UrlEditorEvents = typeof __propDef.events;
+export type UrlEditorSlots = typeof __propDef.slots;
 export default class UrlEditor extends SvelteComponentTyped<UrlEditorProps, UrlEditorEvents, UrlEditorSlots> {
 }
 export {};

package/components/editor/UndoState.d.ts

@@ -1,6 +1,6 @@
-import type { IndexRange } from "../../models/chapter/Caret";
-import type Command from "./Command";
-declare type UndoState = {
+import type { IndexRange } from '../../models/chapter/Caret';
+import type Command from './Command';
+type UndoState = {
     command: Command | undefined;
     bookdown: string;
     range: IndexRange;

package/components/editor/icons/annotate.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><path d="M7.5,9l-3,.54L5,6.5,10.73.79a1,1,0,0,1,1.42,0l1.06,1.06a1,1,0,0,1,0,1.42Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12,9.5v3a1,1,0,0,1-1,1H1.5a1,1,0,0,1-1-1V3a1,1,0,0,1,1-1h3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

package/components/editor/icons/block.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><line x1="13.5" y1="1" x2="8" y2="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="13.5" y1="4" x2="8" y2="4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="13.5" y1="7" x2="8" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="13.5" y1="13" x2="8" y2="13" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="13.5" y1="10" x2="8" y2="10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><rect x="0.5" y="1" width="5" height="5" rx="0.5" transform="translate(-0.5 6.5) rotate(-90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect><rect x="0.5" y="8" width="5" height="5" rx="0.5" transform="translate(-7.5 13.5) rotate(-90)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect></g></svg>

package/components/editor/icons/bold.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><path d="M11,3.5a3,3,0,0,0-3-3H4a1,1,0,0,0-1,1v5H8A3,3,0,0,0,11,3.5Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12,10a3.5,3.5,0,0,1-3.5,3.5H4a1,1,0,0,1-1-1v-6H8.5A3.5,3.5,0,0,1,12,10Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

package/components/editor/icons/bullets.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><circle cx="1" cy="2.5" r="0.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="4.5" y1="2.5" x2="13.5" y2="2.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><circle cx="1" cy="7" r="0.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="4.5" y1="7" x2="13.5" y2="7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><circle cx="1" cy="11.5" r="0.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="4.5" y1="11.5" x2="13.5" y2="11.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g></svg>

package/components/editor/icons/callout.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><g><path d="M3.5,10.78,6.64,3.45a.39.39,0,0,1,.72,0l3.14,7.33" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="4.69" y1="8" x2="9.31" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g><rect x="0.5" y="0.5" width="13" height="13" rx="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect></g></svg>

package/components/editor/icons/citation.svg

@@ -0,0 +1,8 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+    <g>
+        <path d="M3.5,10.78,6.64,3.45a.39.39,0,0,1,.72,0l3.14,7.33" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+        <line x1="4.69" y1="8" x2="9.31" y2="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="12" y1="1" x2="12" y2="4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="12" y1="1" x2="11" y2="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+    </g>
+</svg>

package/components/editor/icons/clear.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><line x1="6.24" y1="6.24" x2="4" y2="13.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="1.5" y1="13.5" x2="6.5" y2="13.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><path d="M5,.5h7.5a1,1,0,0,1,1,1V3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><line x1="0.5" y1="0.5" x2="13.5" y2="13.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line><line x1="8" y1="0.5" x2="7.23" y2="3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line></g></svg>

package/components/editor/icons/clipboard.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><path d="M9.5,1.5H11a1,1,0,0,1,1,1v10a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V2.5a1,1,0,0,1,1-1H4.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><rect x="4.5" y="0.5" width="5" height="2.5" rx="1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></rect></g></svg>

package/components/editor/icons/code.svg

@@ -0,0 +1 @@
+<svg role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g><polyline points="4 10.5 0.5 7 4 3.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></polyline><polyline points="10 10.5 13.5 7 10 3.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></polyline></g></svg>