+
+ );
+ },
+};
+
+/**
+ * The lists plugin keeps nesting under keyboard control: `Tab` and `Shift+Tab` change the depth of
+ * the current list item, `Enter` splits it, and `Enter` on an empty item lifts it out of the list.
+ */
+export const Nesting: Story = {
+ args: {
+ defaultValue: [
+ {
+ type: ElementType.ORDERED_LIST,
+ children: [
+ {
+ type: ElementType.LIST_ITEM,
+ children: [{ type: ElementType.LIST_ITEM_TEXT, children: [{ text: 'Press Tab on the item below' }] }],
+ },
+ {
+ type: ElementType.LIST_ITEM,
+ children: [{ type: ElementType.LIST_ITEM_TEXT, children: [{ text: 'This one' }] }],
+ },
+ {
+ type: ElementType.LIST_ITEM,
+ children: [{ type: ElementType.LIST_ITEM_TEXT, children: [{ text: 'Then Shift+Tab to move it back' }] }],
+ },
+ ],
+ },
+ ],
+ },
+ render: (args, context) => {
+ return {JSON.stringify(value, null, 2)}
+
+
+ );
+ },
+};
+
+/**
+ * The same, with an uploader that always fails. The block reports the failure and offers to try again,
+ * while the value below never gains an `uploaded`: there is nothing to record until an upload succeeds.
+ */
+export const UploadFailure: Story = {
+ args: {
+ defaultValue: [{ type: ElementType.PARAGRAPH, children: [{ text: 'Attach a file to watch it fail.' }] }],
+ },
+ render: (args, context) => {
+ const [value, setValue] = useState{JSON.stringify(value, null, 2)}
+
+
+ );
+ },
+};
+
+/**
+ * The round trip the arrangement exists for. Attach a file, then press the button: the value is put
+ * through `JSON.stringify` and a brand new editor is built from it, with an empty store.
+ *
+ * The file still renders, because the response is on the node and `restoreEntities` puts it back into the
+ * store on load. Nothing re-uploads, and the view reads the store either way — it never needs to know
+ * whether a file arrived this session or last.
+ */
+export const Restore: Story = {
+ args: {
+ defaultValue: [{ type: ElementType.PARAGRAPH, children: [{ text: 'Attach a file, then reload below.' }] }],
+ },
+ render: (args, context) => {
+ const [value, setValue] = useState{JSON.stringify(value, null, 2)}
+
+ {/* A new key builds a new editor, and with it a new store — the same as a page load. */}
+
+ );
+ },
+};
diff --git a/packages/editor/src/demo/Editor.tsx b/packages/editor/src/demo/Editor.tsx
new file mode 100644
index 000000000..b0f7d70e4
--- /dev/null
+++ b/packages/editor/src/demo/Editor.tsx
@@ -0,0 +1,422 @@
+import { ChangeEvent, MouseEvent, ReactNode, useMemo, useRef, useState } from 'react';
+
+import { BaseSelection, createEditor, Descendant } from 'slate';
+import { withHistory } from 'slate-history';
+import { Editable, ReactEditor, RenderElementProps, RenderLeafProps, Slate, useSlate, withReact } from 'slate-react';
+
+import { DEFAULT_LABELS, EditorLabels } from './Editor.labels';
+import { ElementFile } from './ElementFile';
+
+import { BASE_SCHEMA, ElementType, ENTITIES_SCHEMA, LINKS_SCHEMA, LISTS_SCHEMA, UploadedFile } from '../testing';
+import {
+ BaseEditor,
+ composeKeyDown,
+ createEntityStore,
+ EntitiesEditor,
+ EntityState,
+ EntityUploader,
+ isElementType,
+ isValidHttpUrl,
+ LinksEditor,
+ ListsEditor,
+ onBaseKeyDown,
+ onListsKeyDown,
+ withBase,
+ withEntities,
+ withLinks,
+ withLists,
+ withNodeId,
+} from '..';
+
+import {
+ Button,
+ Divider,
+ IconAttachmentLineW500,
+ IconFormatBoldFillW500,
+ IconFormatClearFillW500,
+ IconFormatHeader1FillW500,
+ IconFormatHeader2FillW500,
+ IconFormatHeader3FillW500,
+ IconFormatItalicFillW500,
+ IconFormatListBulletedLineW500,
+ IconFormatListNumberedLineW500,
+ IconFormatStrikethroughFillW500,
+ IconFormatUnderlineFillW500,
+ IconLinkLineW500,
+ IconLinkOffLineW500,
+ TextField,
+ Tooltip,
+ useEvent,
+} from '@esfront/react';
+
+export interface EditorProps {
+ /** The initial document. Slate requires at least one node. */
+ defaultValue?: Descendant[];
+ /** Overrides for the toolbar labels. Every string the demo renders comes from here. */
+ labels?: Partial{JSON.stringify(value, null, 2)}
+ {children}
; + case ElementType.H2: + return{children}
; + case ElementType.H3: + return{children}
; + case ElementType.H4: + return{children}
; + case ElementType.H5: + return{children}
; + case ElementType.H6: + return{children}
; + case ElementType.ORDERED_LIST: + return- {children}
- {children}
{children}
;
+ case ElementType.LINK:
+ return (
+
+ {children}
+
+ );
+ case ElementType.FILE:
+ return (
+ {children}
; + } + }; + +const renderLeaf = ({ attributes, children, leaf }: RenderLeafProps) => { + let content: ReactNode = children; + + // Semantic elements rather than inline styles, so the theme keeps control of how a mark looks. + if (leaf.bold) { + content = {content}; + } + + if (leaf.italic) { + content = {content}; + } + + if (leaf.underline) { + content = {content}; + } + + if (leaf.lineThrough) { + content =
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Dropping or pasting a file onto the editable works without any of this; the button is
+ here for the case where there is nothing to drop. */}
+
+
+
+ {linkUrl !== null && (
+
+ )}
+
+
+
+ );
+};
diff --git a/packages/editor/src/demo/fake-uploader.ts b/packages/editor/src/demo/fake-uploader.ts
new file mode 100644
index 000000000..b9149e751
--- /dev/null
+++ b/packages/editor/src/demo/fake-uploader.ts
@@ -0,0 +1,61 @@
+import { UploadedFile } from '../testing';
+import { EntityUploader } from '..';
+
+export interface FakeUploaderOptions {
+ /** Fails every upload, so that the error and retry states are reachable in the demo. */
+ fail?: boolean;
+ /** Roughly how long an upload takes, in milliseconds. */
+ duration?: number;
+}
+
+const STEPS = 20;
+
+let uploaded = 0;
+
+/**
+ * Builds an uploader that reports progress and then resolves or fails, without a network.
+ *
+ * It resolves with a whole response rather than just an id, the way an API would: the url is what a view
+ * needs in order to show the file, and it is not the part the document keeps. Here that url points at the
+ * file the browser already has, so the demo works offline.
+ *
+ * It honours the abort signal, which is what makes removing a block mid-upload visible: the ticking stops
+ * rather than running on against a node that is no longer there.
+ */
+export const createFakeUploader = ({
+ fail = false,
+ duration = 2000,
+}: FakeUploaderOptions = {}): EntityUploader
+ {url && isImage && 
}
+
+
+ {url ? (
+
+ {name}
+
+ ) : (
+ name
+ )}
+
+
+ {state?.status === 'uploading' && (
+
+ {labels.fileUploading} {percent}%
+
+ )}
+
+ {state?.status === 'done' && {labels.fileDone}}
+
+ {state?.status === 'error' && (
+ <>
+ {labels.fileFailed}
+
+
+ )}
+
+
+ {/* Slate needs the children of a void node rendered, even though there is nothing to edit. */}
+ {children}
+ Editor
+Restore
+Uploads
+