docs: add an example about using <figcaption> with ImageExtension (…

…remirror#1416)

docs/extensions/image-extension.mdx

@@ -5,6 +5,7 @@ title: 'ImageExtension'
 
 import Basic from '../../website/extension-examples/extension-image/basic';
 import Resizable from '../../website/extension-examples/extension-image/resizable';
+import WithFigcaption from '../../website/extension-examples/extension-image/with-figcaption';
 
 # `ImageExtension`
 
@@ -30,10 +31,18 @@ The extension is provided by the `@remirror/extension-image` package. There are
 
 ### Examples
 
+Here is a basic image example. You can see a grean image below.
+
 <Basic />
 
+You can also make an image resizable by using `enableResizing` option.
+
 <Resizable />
 
+You can further customize `ImageExtension` by extending it. For example, using a `<figure>` element to wrap the image and adding a `<figcaption>` element.
+
+<WithFigcaption />
+
 ## API
 
 - [ImageExtension](../api/extension-image)

packages/storybook-react/stories/extension-image/basic.tsx

@@ -32,7 +32,7 @@ const Basic = ({ delaySeconds = 1 }: { delaySeconds: number }): JSX.Element => {
           content: [
             {
               type: 'text',
-              text: 'You can see a green image below.',
+              text: 'You can see a green image above.',
             },
           ],
         },

packages/storybook-react/stories/extension-image/image.stories.tsx

@@ -2,6 +2,7 @@ import type { Story } from '@storybook/react';
 
 import BasicComponent from './basic';
 import ResizableCompoment from './resizable';
+import WithFigcaption from './with-figcaption';
 
 const Basic: Story<{ delaySeconds: number }> = BasicComponent.bind({});
 Basic.args = {
@@ -15,6 +16,6 @@ Resizable.args = {
 };
 Resizable.storyName = 'Resizable';
 
-export { Basic, Resizable };
+export { Basic, Resizable, WithFigcaption };
 
 export default { title: 'Extensions / Image' };

packages/storybook-react/stories/extension-image/with-figcaption.tsx

@@ -0,0 +1,74 @@
+import 'remirror/styles/all.css';
+
+import { ApplySchemaAttributes, NodeExtensionSpec, NodeSpecOverride } from 'remirror';
+import { ImageExtension } from 'remirror/extensions';
+import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
+
+class FigcaptionExtension extends ImageExtension {
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    const spec = super.createNodeSpec(extra, override);
+
+    return {
+      ...spec,
+      attrs: {
+        ...spec.attrs,
+        figcaptionText: { default: '' },
+      },
+      toDOM: (node) => [
+        'figure',
+        {
+          style: 'border: 2px solid #479e0c; padding: 8px; margin: 8px; text-align: center;',
+        },
+        spec.toDOM!(node),
+        [
+          'figcaption',
+          { style: 'background-color: #3d3d3d; color: #f1f1f1; padding: 8px;' },
+          node.attrs.figcaptionText,
+        ],
+      ],
+    };
+  }
+}
+
+const extensions = () => [new FigcaptionExtension()];
+
+const WithFigcaption = (): JSX.Element => {
+  const imageSrc = 'https://dummyimage.com/2000x800/479e0c/fafafa';
+
+  const { manager, state, onChange } = useRemirror({
+    extensions,
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                height: 160,
+                width: 400,
+                src: imageSrc,
+                figcaptionText: 'This is a <figcaption> element',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror
+        manager={manager}
+        autoFocus
+        onChange={onChange}
+        initialContent={state}
+        autoRender='end'
+      />
+    </ThemeProvider>
+  );
+};
+
+export default WithFigcaption;

website/extension-examples/extension-image/with-figcaption.tsx

@@ -0,0 +1,30 @@
+/**
+ * THIS FILE IS AUTO GENERATED!
+ *
+ * Run `pnpm -w generate:website-examples` to regenerate this file.
+ */
+
+// @ts-nocheck
+
+import CodeBlock from '@theme/CodeBlock';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import ComponentSource from '!!raw-loader!../../../packages/storybook-react/stories/extension-image/with-figcaption.tsx';
+
+import { StoryExample } from '../../src/components/story-example-component';
+
+const ExampleComponent = (): JSX.Element => {
+  const story = (
+    <BrowserOnly>
+      {() => {
+        const ComponentStory = require('../../../packages/storybook-react/stories/extension-image/with-figcaption').default
+        return <ComponentStory/>
+      }}
+    </BrowserOnly>
+  );
+  const source = <CodeBlock className='language-tsx'>{ComponentSource}</CodeBlock>;
+
+  return <StoryExample story={story} source={source} />;
+};
+
+export default ExampleComponent;
+