playbook_ui 13.10.0.pre.alpha.play978makehighchartsadevdependencypoc1322 → 13.10.0.pre.alpha.play10481357

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5c698aeede8c696425be923ef80ccb4b453064586661668bca56ed1787a74e3
-  data.tar.gz: a87fad36bcc83461fcc2339ee3e63c8a2e18aedb037b6e6d28c4376df3ffc7c0
+  metadata.gz: 4be354f837930c062c2ca20fb53bbeb46c9eb62f30a8e1719eee358ce16e0f8b
+  data.tar.gz: e0768ac01b6863cfab1a30ea9ab9bfeb41879a0b4500cf6b2ffe09824984f823
 SHA512:
-  metadata.gz: c7f26369bc905f351e426edf19c216f6d49e5a3ea3a5e36d028396aed0404f67cb989ab3f5e38622ee1d1eca7d2a25fd3cf80a85e3a4bf09883d635c5d3904ce
-  data.tar.gz: cef471a7455cf4866819da82b92149fd24080c5f32ee1042a83cca2ddcdb417a5e15a411bc436d5aeca2b0e24a6e2cf26b6c557487a62c2bf5b9ec5ac5ebf9c7
+  metadata.gz: 7843c0ec8b259fb4eaea357b2345665a23879952c4093dcf43598d1ee4533f3077ae84a6b7b040243ffcaaf057ab67246406ffab8437bb2ef11741eaf6d579ee
+  data.tar.gz: 7f956d0c0beb74d55e19cab98bceee15ba08fe26591dba9d84bdd2445f9c1dc17e77494874e58e1f25a2fc3d944687bc97e5fd4e49594b5a15f6d58226b23791

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -4,6 +4,7 @@ import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import cn from 'classnames'
 
 try {
   const Trix = require('trix')
@@ -29,6 +30,7 @@ type Editor = {
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
   advancedEditor?: any,
+  advancedEditorToolbar?: boolean,
   toolbarBottom?: Boolean,
   children?: React.ReactNode | React.ReactNode[]
   className?: string,
@@ -51,6 +53,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     advancedEditor,
+    advancedEditorToolbar = true,
     toolbarBottom = false,
     children,
     className,
@@ -163,8 +166,14 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     >
       {
         advancedEditor ? (
-          <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+          <div 
+              className={cn("pb_rich_text_editor_advanced_container", { 
+              ["toolbar-active"]: advancedEditorToolbar,
+              })}
+            >
+            {advancedEditorToolbar && (
+              <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+            )}
           { children }
           </div>
         ) : (

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -65,9 +65,7 @@
   .ProseMirror {
     background: $white;
     border: 1px solid $border_light;
-    border-top-color: transparent;
-    border-bottom-right-radius: $border_rad_heaviest;
-    border-bottom-left-radius: $border_rad_heaviest;
+    border-radius: $border_rad_heaviest;
     height: 100%;
     padding: 1rem 1.5rem 1.5rem 1.5rem;
     line-height: $lh_loose;
@@ -127,7 +125,6 @@
     }
     &:focus-visible {
       outline: unset;
-      border-top-color: $primary;
       @include transition_default;
     }
     h1 {
@@ -228,4 +225,11 @@
     border-radius: $border_rad_heaviest;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
+  &.toolbar-active {
+    .ProseMirror { 
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+
+import { RichTextEditor } from "../..";
+
+import Document from "@tiptap/extension-document";
+import Paragraph from "@tiptap/extension-paragraph";
+import Text from "@tiptap/extension-text";
+
+const RichTextEditorToolbarDisabled = (props) => {
+  const editor = useEditor({
+    extensions: [Document, Paragraph, Text],
+    content:
+      "Add your text here. You can format your text, add links, quotes, and bullets.",
+  });
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div>
+      <RichTextEditor 
+          advancedEditor={editor} 
+          advancedEditorToolbar={false}
+          {...props}
+      >
+        <EditorContent editor={editor} />
+      </RichTextEditor>
+    </div>
+  );
+};
+
+export default RichTextEditorToolbarDisabled;

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md

@@ -0,0 +1,3 @@
+This variant allows you to optionally include the default toolbar. 
+
+The default toolbar relies on [Tiptap's StarterKit](https://tiptap.dev/api/extensions/starter-kit) which might add  that are not necessary for your application. Setting the `advancedEditorToobar` to false enables you to instantiate an editor with the minimum requirements.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -15,6 +15,7 @@ examples:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
+  - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -8,4 +8,5 @@ export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_tool
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
-export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
+export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "../utilities/test-utils";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+
+import RichTextEditor from "./_rich_text_editor";
+
+const kitClass = "pb_rich_text_editor_advanced_container";
+
+const EditorTest = (props) => {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    content: "",
+  });
+
+  return (
+    <RichTextEditor 
+        advancedEditor={editor} 
+        {...props}
+    >
+      <EditorContent editor={editor} />
+    </RichTextEditor>
+  );
+};
+
+test("returns namespaced class name", () => {
+  const { container } = render(<EditorTest />);
+
+  expect(container.getElementsByClassName(kitClass).length).toBeGreaterThan(0);
+});
+
+test("returns toolbar class name", () => {
+  const { container } = render(<EditorTest />);
+
+  expect(
+    container.getElementsByClassName(`${kitClass} toolbar-active`).length
+  ).toBeGreaterThan(0);
+});
+
+test("doesn't returns toolbar class name", () => {
+  const { container } = render(<EditorTest advancedEditorToolbar={false} />);
+
+  expect(
+    container.getElementsByClassName(`${kitClass} toolbar-active`).length
+  ).toBe(0);
+});