[@mantine/demos] Migrate @mantine/rte demos

Wurielle · Jan 30, 2022 · 657debe · 657debe
1 parent 582ea08
commit 657debe
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 7 deletions.
diff --git a/src/mantine-demos/src/Demos.story.tsx b/src/mantine-demos/src/Demos.story.tsx
@@ -94,3 +94,4 @@ attachDemos(storiesOf('@mantine/dates/TimeRangeInput/demos', module), demos.Time
 attachDemos(storiesOf('@mantine/dropzone/Dropzone/demos', module), demos.DropzoneDemos);
 attachDemos(storiesOf('@mantine/notifications/demos', module), demos.NotificationsDemos);
 attachDemos(storiesOf('@mantine/prism/demos', module), demos.PrismDemos);
+attachDemos(storiesOf('@mantine/rte/demos', module), demos.RichTextEditorDemos);
diff --git a/src/mantine-demos/src/demos/RichTextEditor/_SSRWrapper.tsx b/src/mantine-demos/src/demos/RichTextEditor/_SSRWrapper.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RichTextEditorProps } from '@mantine/rte';
+
+export function SSRWrapper(props: RichTextEditorProps) {
+  if (typeof window !== 'undefined') {
+    // eslint-disable-next-line import/extensions, global-require
+    const { RichTextEditor } = require('@mantine/rte');
+    return <RichTextEditor {...props} />;
+  }
+
+  return null;
+}
diff --git a/src/mantine-demos/src/demos/RichTextEditor/embeds.tsx b/src/mantine-demos/src/demos/RichTextEditor/embeds.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { SSRWrapper } from './_SSRWrapper';
+
+const initialValue =
+  '<h2 class="ql-align-center">Embedding videos and images is simple</h2><p>To embed a video click video icon and paste a link to YouTube, Vimeo or other video service which supports inserting via iframe. Images are more complex you will need to setup uploading function and then editor will handle all heavy image stuff: dnd, pasting from clipboard and inserting with image button. Try the thing out!</p><h3>Image embed</h3><p><img src="https://images.unsplash.com/photo-1622976900798-4698bb3ea66e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=60"></p><p><br></p><h3>YouTube video embed</h3><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/T6HdBplLmuU?showinfo=0"></iframe><p><br></p><h3>Vimeo video embed</h3><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="https://player.vimeo.com/video/601252574/"></iframe><p><br></p>';
+
+function Demo() {
+  const [value, onChange] = useState(initialValue);
+  return <SSRWrapper value={value} onChange={onChange} />;
+}
+
+export const embeds: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+};
diff --git a/src/mantine-demos/src/demos/RichTextEditor/index.ts b/src/mantine-demos/src/demos/RichTextEditor/index.ts
@@ -0,0 +1,6 @@
+export { usage } from './usage';
+export { toolbar } from './toolbar';
+export { simple } from './simple';
+export { embeds } from './embeds';
+export { mentions } from './mentions';
+export { readOnly } from './readOnly';
diff --git a/src/mantine-demos/src/demos/RichTextEditor/mentions.tsx b/src/mantine-demos/src/demos/RichTextEditor/mentions.tsx
@@ -0,0 +1,96 @@
+import React, { useState, useMemo } from 'react';
+import { SSRWrapper } from './_SSRWrapper';
+
+const code = `
+import { useState } from 'react;
+import { RichTextEditor } from '@mantine/rte';
+
+
+const people = [
+  { id: 1, value: 'Bill Horsefighter' },
+  { id: 2, value: 'Amanda Hijacker' },
+  { id: 3, value: 'Leo Summerhalter' },
+  { id: 4, value: 'Jane Sinkspitter' },
+];
+
+const tags = [
+  { id: 1, value: 'JavaScript' },
+  { id: 2, value: 'TypeScript' },
+  { id: 3, value: 'Ruby' },
+  { id: 3, value: 'Python' },
+];
+
+function Demo() {
+  const [value, onChange] = useState('<p>Type @ or # to see mentions autocomplete</p>');
+  const mentions = useMemo(
+    () => ({
+      allowedChars: /^[A-Za-z\\sÅÄÖåäö]*$/,
+      mentionDenotationChars: ['@', '#'],
+      source: (searchTerm, renderList, mentionChar) => {
+        const list = mentionChar === '@' ? people : tags;
+        const includesSearchTerm = list.filter((item) =>
+          item.value.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+        renderList(includesSearchTerm);
+      },
+    }),
+    []
+  );
+
+  return (
+    <RichTextEditor
+      value={value}
+      onChange={onChange}
+      placeholder="Type @ or # to see mentions autocomplete"
+      mentions={mentions}
+    />
+  );
+}
+`;
+
+const people = [
+  { id: 1, value: 'Bill Horsefighter' },
+  { id: 2, value: 'Amanda Hijacker' },
+  { id: 3, value: 'Leo Summerhalter' },
+  { id: 4, value: 'Jane Sinkspitter' },
+];
+
+const tags = [
+  { id: 1, value: 'JavaScript' },
+  { id: 2, value: 'TypeScript' },
+  { id: 3, value: 'Ruby' },
+  { id: 3, value: 'Python' },
+];
+
+function Demo() {
+  const [value, onChange] = useState('<p>Type @ or # to see mentions autocomplete</p>');
+  const mentions = useMemo(
+    () => ({
+      allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+      mentionDenotationChars: ['@', '#'],
+      source: (searchTerm, renderList, mentionChar) => {
+        const list = mentionChar === '@' ? people : tags;
+        const includesSearchTerm = list.filter((item) =>
+          item.value.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+        renderList(includesSearchTerm);
+      },
+    }),
+    []
+  );
+
+  return (
+    <SSRWrapper
+      value={value}
+      onChange={onChange}
+      placeholder="Type @ or # to see mentions autocomplete"
+      mentions={mentions}
+    />
+  );
+}
+
+export const mentions: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/RichTextEditor/readOnly.tsx b/src/mantine-demos/src/demos/RichTextEditor/readOnly.tsx
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { SSRWrapper } from './_SSRWrapper';
+
+export const html = `
+<p>This editor is <b>read only</b></p>
+`;
+
+const code = `
+<RichTextEditor readOnly {...otherProps} />
+`;
+
+function Demo(props: any) {
+  const [value, onChange] = useState(html);
+  return <SSRWrapper readOnly value={value} onChange={onChange} stickyOffset={60} {...props} />;
+}
+
+export const readOnly: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/RichTextEditor/simple.tsx b/src/mantine-demos/src/demos/RichTextEditor/simple.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { SSRWrapper } from './_SSRWrapper';
+
+const code = `
+import { useState } from 'react;
+import { RichTextEditor } from '@mantine/rte';
+
+const initialValue =
+  '<p>Your initial <b>html value</b> or an empty string to init editor without value</p>';
+
+function Demo() {
+  const [value, onChange] = useState(initialValue);
+  return <RichTextEditor value={value} onChange={onChange} />;
+}
+`;
+
+const initialValue =
+  '<p>Your initial <b>html value</b> or an empty string to init editor without value</p>';
+
+function Demo() {
+  const [value, onChange] = useState(initialValue);
+  return <SSRWrapper value={value} onChange={onChange} />;
+}
+
+export const simple: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/RichTextEditor/toolbar.tsx b/src/mantine-demos/src/demos/RichTextEditor/toolbar.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { DEFAULT_CONTROLS, DEFAULT_LABELS, Toolbar } from '@mantine/rte';
+
+const code = `
+<RichTextEditor
+  controls={[
+    ['bold', 'italic', 'underline', 'link', 'image'],
+    ['unorderedList', 'h1', 'h2', 'h3'],
+    ['sup', 'sub'],
+    ['alignLeft', 'alignCenter', 'alignRight'],
+  ]}
+/>
+`;
+
+function Demo() {
+  return (
+    <div>
+      <Text style={{ paddingLeft: 15 }}>Default toolbar:</Text>
+      <Toolbar
+        controls={DEFAULT_CONTROLS}
+        labels={DEFAULT_LABELS}
+        style={{ borderBottomWidth: 0 }}
+      />
+
+      <Text style={{ paddingLeft: 15, marginTop: 15 }}>Custom toolbar:</Text>
+      <Toolbar
+        controls={[
+          ['bold', 'italic', 'underline', 'link', 'image'],
+          ['unorderedList', 'h1', 'h2', 'h3'],
+          ['sup', 'sub'],
+          ['alignLeft', 'alignCenter', 'alignRight'],
+        ]}
+        labels={DEFAULT_LABELS}
+        style={{ borderBottomWidth: 0 }}
+      />
+    </div>
+  );
+}
+
+export const toolbar: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/RichTextEditor/usage.tsx b/src/mantine-demos/src/demos/RichTextEditor/usage.tsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { SSRWrapper } from './_SSRWrapper';
+
+export const html = `
+<h2 class="ql-align-center">Welcome to Mantine Rich Text Editor</h2><p>RichTextEditor component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. RichTextEditor is based on <a href="https://quilljs.com/" rel="noopener noreferrer" target="_blank">Quill.js</a> via <a href="https://github.com/zenoamaro/react-quill" rel="noopener noreferrer" target="_blank">react-quill</a> and supports most of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strikethrough</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Image and video embeds</li><li>Text align&nbsp;</li></ul><p>But RichTextEditor is not just a wrapper for <a href="https://github.com/zenoamaro/react-quill" rel="noopener noreferrer" target="_blank">react-quill</a>, it comes with a bunch of extra features:</p><ol><li>Seamless integration with your Mantine theme – component will use font-family, font-sizes, spacing and primary color from your custom theme, defined in MantineProvider</li><li>Dark theme support – like any other Mantine component, RichTextEditor supports dark theme out of the box</li><li>Images uploading – specify upload function (S3 or anywhere else) that will be triggered when user pastes or drops image to editor</li><li>Sticky toolbar will be visible when user scrolls</li></ol>
+`;
+
+function Demo(props: any) {
+  const [value, onChange] = useState(html);
+  return <SSRWrapper value={value} onChange={onChange} stickyOffset={60} {...props} />;
+}
+
+export const usage: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  demoProps: {
+    inline: true,
+  },
+};
diff --git a/src/mantine-demos/src/index.ts b/src/mantine-demos/src/index.ts
@@ -90,3 +90,4 @@ export * as TimeRangeInputDemos from './demos/TimeRangeInput';
 export * as DropzoneDemos from './demos/Dropzone';
 export * as NotificationsDemos from './demos/Notifications';
 export * as PrismDemos from './demos/Prism';
+export * as RichTextEditorDemos from './demos/RichTextEditor';
diff --git a/src/mantine-rte/src/stories/Rte.demos.story.tsx b/src/mantine-rte/src/stories/Rte.demos.story.tsx