add example demos

2021-08-25 12:13:46 +02:00
parent 15c7e1955a
commit 4607a2dbd5
82 changed files with 4993 additions and 0 deletions
--- a/demos/src/Examples/Menus/React/index.html
+++ b/demos/src/Examples/Menus/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('Examples/Menus', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Examples/Menus/React/index.jsx
+++ b/demos/src/Examples/Menus/React/index.jsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  useEditor,
+  EditorContent,
+  BubbleMenu,
+  FloatingMenu,
+} from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+    ],
+    content: `
+      <p>
+        Try to select <em>this text</em> to see what we call the bubble menu.
+      </p>
+      <p>
+        Neat, isn’t it? Add an empty paragraph to see the floating menu.
+      </p>
+    `,
+  })
+
+  return (
+    <>
+      {editor && <BubbleMenu className="bubble-menu" tippyOptions={{ duration: 100 }} editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          className={editor.isActive('bold') ? 'is-active' : ''}
+        >
+          Bold
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          className={editor.isActive('italic') ? 'is-active' : ''}
+        >
+          Italic
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          className={editor.isActive('strike') ? 'is-active' : ''}
+        >
+          Strike
+        </button>
+      </BubbleMenu>}
+
+      {editor && <FloatingMenu className="floating-menu" tippyOptions={{ duration: 100 }} editor={editor}>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+        >
+          H1
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        >
+          H2
+        </button>
+        <button
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          className={editor.isActive('bulletList') ? 'is-active' : ''}
+        >
+          Bullet List
+        </button>
+      </FloatingMenu>}
+
+      <EditorContent editor={editor} />
+    </>
+  )
+}
--- a/demos/src/Examples/Menus/React/index.spec.js
+++ b/demos/src/Examples/Menus/React/index.spec.js
@@ -0,0 +1,7 @@
+context('/demos/Examples/BubbleMenu/React', () => {
+  before(() => {
+    cy.visit('/demos/Examples/BubbleMenu/React')
+  })
+
+  // TODO: Write tests
+})
--- a/demos/src/Examples/Menus/React/styles.scss
+++ b/demos/src/Examples/Menus/React/styles.scss
@@ -0,0 +1,53 @@
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+}
+
+.bubble-menu {
+  display: flex;
+  background-color: #0D0D0D;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    color: #FFF;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}
+
+.floating-menu {
+  display: flex;
+  background-color: #0D0D0D10;
+  padding: 0.2rem;
+  border-radius: 0.5rem;
+
+  button {
+    border: none;
+    background: none;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0 0.2rem;
+    opacity: 0.6;
+
+    &:hover,
+    &.is-active {
+      opacity: 1;
+    }
+  }
+}