Source: components/editor/index.js

  1. import React, { memo, useState } from "react";
  3. import "@remirror/styles/all.css";
  4. import {
  5.   BlockquoteExtension,
  6.   BoldExtension,
  7.   BulletListExtension,
  8.   CodeExtension,
  9.   HardBreakExtension,
  10.   HeadingExtension,
  11.   ItalicExtension,
  12.   LinkExtension,
  13.   ListItemExtension,
  14.   MarkdownExtension,
  15.   OrderedListExtension,
  16.   PlaceholderExtension,
  17.   StrikeExtension,
  18.   TableExtension,
  19.   TrailingNodeExtension,
  20. } from "remirror/extensions";
  21. import { Remirror, ThemeProvider, useRemirror, Toolbar } from "@remirror/react";
  22. import { BRAND_HEX } from "../../lib/config";
  23. import {
  24.   ToggleBoldButton,
  25.   ToggleItalicButton,
  26.   ToggleStrikeButton,
  27.   ToggleBlockquoteButton,
  28.   HeadingLevelButtonGroup,
  29.   HistoryButtonGroup,
  30.   CommandButtonGroup,
  31. } from "./buttons";
  32. import { css } from "@emotion/css";
  33. import SyncManagerHook from "./sync-manager-hook";
  34. import { ExtensionPriority } from "remirror";
  35. import { CommandsExtension } from "@remirror/core";
  36. import { Box } from "grommet";
  37. import { useTranslation } from "next-i18next";
  39. const extensions = (placeholder) => [
  40.   new CommandsExtension(),
  41.   new PlaceholderExtension({ placeholder }),
  42.   new LinkExtension({ autoLink: true }),
  43.   new BoldExtension(),
  44.   new StrikeExtension(),
  45.   new ItalicExtension(),
  46.   new HeadingExtension(),
  47.   new LinkExtension(),
  48.   new BlockquoteExtension(),
  49.   new BulletListExtension({ enableSpine: true }),
  50.   new OrderedListExtension(),
  51.   new ListItemExtension({
  52.     priority: ExtensionPriority.High,
  53.     enableCollapsible: true,
  54.   }),
  55.   new CodeExtension(),
  56.   new TrailingNodeExtension(),
  57.   new TableExtension(),
  58.   new MarkdownExtension({ copyAsMarkdown: false }),
  59.   /**
  60.    * `HardBreakExtension` allows us to create a newline inside paragraphs.
  61.    * e.g. in a list item
  62.    */
  63.   new HardBreakExtension(),
  64. ];
  65. /**
  66.  * The editor which is used to create the annotation. Supports formatting.
  67.  */
  68. function Editor(props) {
  69.   const { defaultValue, save } = props;
  70.   const { t, ready } = useTranslation("editor");
  72.   const { manager } = useRemirror({
  73.     extensions: extensions(ready ? t("i-had-a-dream") : ""),
  74.     stringHandler: "html",
  75.   });
  77.   return (
  78.     <>
  79.       <ThemeProvider>
  80.         <MarkdownTextEditor
  81.           manager={manager}
  82.           save={save}
  83.           defaultValue={defaultValue}
  84.           t={t}
  85.           ready={ready}
  86.         />
  87.       </ThemeProvider>
  88.     </>
  89.   );
  90. }
  92. function MarkdownToolbar(props) {
  93.   const { t, ready } = props;
  95.   return (
  96.     <Toolbar
  97.       style={{
  98.         width: "100vw",
  99.         backgroundColor: BRAND_HEX,
  100.         padding: "1rem",
  101.         display: "flex",
  102.         justifyContent: "center",
  103.         flexWrap: "wrap",
  104.       }}
  105.     >
  106.       <CommandButtonGroup>
  107.         <ToggleBoldButton t={t} ready={ready} />
  108.         <ToggleItalicButton t={t} ready={ready} />
  109.         <ToggleStrikeButton t={t} ready={ready} />
  110.       </CommandButtonGroup>
  111.       <HeadingLevelButtonGroup t={t} ready={ready} />
  112.       <CommandButtonGroup>
  113.         <ToggleBlockquoteButton t={t} ready={ready} />
  114.       </CommandButtonGroup>
  115.       <HistoryButtonGroup t={t} ready={ready} />
  116.     </Toolbar>
  117.   );
  118. }
  120. function MarkdownTextEditor(props) {
  121.   const { manager, save, defaultValue, t, ready } = props;
  122.   const [html, setHtml] = useState();
  124.   return (
  125.     <>
  126.       <Remirror
  127.         manager={manager}
  128.         onChange={({ helpers, state }) => {
  129.           const html = helpers.getHTML(state);
  130.           setHtml(html);
  131.         }}
  132.         autoRender="end"
  133.         initialContent={defaultValue}
  134.         classNames={[
  135.           css`
  136.             &.ProseMirror {
  137.               box-shadow: none !important;
  138.               overflow-y: unset !important;
  139.             }
  140.           `,
  141.         ]}
  142.       >
  143.         <MarkdownToolbar t={t} ready={ready} />
  144.         <SyncManagerHook html={html} save={save} />
  145.       </Remirror>
  146.       <Box
  147.         style={{
  148.           position: "absolute",
  149.           height: "22rem",
  150.           width: "100vw",
  151.         }}
  152.       />
  153.     </>
  154.   );
  155. }
  157. export default memo(Editor);