playbook_ui 12.9.1.pre.alpha.menucleanup345 → 12.9.1.pre.alpha.play664tiptapinvestigation353

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 332bb185698e65bbff441d57efd503570b759137f2460d3d5025335cb95339f7
-  data.tar.gz: 948fb06c5f69f1703ea49726895a5fb6a65e51c229bbb2d49786adc8fa1410cb
+  metadata.gz: 61ba9a2cef24c5fa7a495f102e609cc97cc72bff9274a72c997da47e96b160a7
+  data.tar.gz: 1d5afc2eb0c7c1db82403a81a129133714c6966d49689f27abf009308cdd62db
 SHA512:
-  metadata.gz: 2fe91a1a0345f1e4a545192509319f919aa47cb0ab3dec9af2b85ee0513f432509759987a45132389a5b3270f0f501ab718ad9e73f156d01172f53945060674b
-  data.tar.gz: 2a2372c64a47f38bc9fe639e5c1d791ee855aaed1ece5ccc6661146600e171b7c66bd05492c9212fbb3906842f34e02562424a6697593ac966990dc466ac9056
+  metadata.gz: f983a47ce1cb184449bb35351735e60fbc6665325ac50326c91cf63a442cfe1ceb1e8b74b4f12f410e10a9de3cf85e20113a6b2b8581aa44f1a3376e6087eec7
+  data.tar.gz: f167f1101eb9b74e99b3b6cd51f59ac331dc54f4557ce3a8fe2383cc805540877ae41a3df8d6f288d6fcb2b08183ea6e5c961a4fda9410d70f32e69e4cd3b2f9

data/{dist → app/pb_kits/playbook/data}/menu.yml

@@ -108,4 +108,3 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
-  - tired

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

@@ -7,6 +7,7 @@ import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
+import PBTipTapEditor from './_tiptap'
 
 try {
   const Trix = require('trix')
@@ -20,6 +21,7 @@ import { TrixEditor } from "react-trix"
 
 type RichTextEditorProps = {
   aria?: object,
+  advanced?: Boolean,
   toolbarBottom?: Boolean,
   className?: string,
   data?: object,
@@ -38,6 +40,7 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    advanced = false,
     toolbarBottom = false,
     className,
     data = {},
@@ -145,14 +148,23 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         {...dataProps}
         className={css}
     >
-      <TrixEditor
-          className=""
-          fileParamName={name}
-          onChange={onChange}
-          onEditorReady={handleOnEditorReady}
-          placeholder={placeholder}
-          value={value}
-      />
+      {
+        advanced ? (
+          <>
+          <PBTipTapEditor/>
+          </>
+        ) : (
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
+        )
+      }
+      
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Bold from '@tiptap/extension-bold'
+import Strike from '@tiptap/extension-strike'
+import Italic from '@tiptap/extension-italic'
+
+const PBTipTapEditor = () => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Bold,
+            Italic,
+            Strike
+        ],
+        content:"Hi from Tiptap!"
+    })
+    Bold.configure({
+        HTMLAttributes: {
+          class: 'my-custom-class',
+        },
+      })
+      if (!editor) {
+        return null
+      }
+
+    return (
+        <>
+        <button
+            className={editor.isActive('bold') ? 'is-active' : ''}
+            onClick={() => editor.chain().focus().toggleBold().run()}
+        >
+        Bold
+        </button>
+        <button
+            className={editor.isActive('italic') ? 'is-active' : ''}
+            disabled={
+            !editor.can()
+                .chain()
+                .focus()
+                .toggleItalic()
+                .run()
+            }
+            onClick={() => editor.chain().focus().toggleItalic().run()}
+        >
+        italic
+        </button>
+        <button
+            className={editor.isActive('strike') ? 'is-active' : ''}
+            disabled={
+            !editor.can()
+                .chain()
+                .focus()
+                .toggleStrike()
+                .run()
+            }
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+        >
+        strike
+        </button>
+        <EditorContent editor={editor}/>
+        </>
+    )
+}
+
+export default PBTipTapEditor

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+
+const RichTextEditorTipTap = (props) => {
+  return (
+    <div>
+      <RichTextEditor
+          advanced
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default RichTextEditorTipTap

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

@@ -13,6 +13,7 @@ examples:
 
   react:
   - rich_text_editor_default: Default
+  - rich_text_editor_tip_tap: Advanced
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
@@ -21,3 +22,4 @@ examples:
   - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
+

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

@@ -7,3 +7,4 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
+export { default as RichTextEditorTipTap } from './_rich_text_editor_tip_tap.jsx'

data/lib/playbook/pb_doc_helper.rb

@@ -27,9 +27,9 @@ module Playbook
 
     # Deal with lists of kits, used in Playbook doc and Externally
     # rubocop:disable Style/StringConcatenation
-    def pb_kits(type: "rails", limit_examples: false, dark_mode: false, method: get_kits)
+    def pb_kits(type: "rails", limit_examples: false, dark_mode: false)
       display_kits = []
-      kits = method
+      kits = get_kits
       kits.each do |kit|
         if kit.is_a?(Hash)
           nav_hash_array(kit).each do |sub_kit|
@@ -45,12 +45,7 @@ module Playbook
 
     # rubocop:disable Naming/AccessorMethodName
     def get_kits
-      menu = YAML.load_file(Playbook::Engine.root.join("dist/menu.yml"))
-      menu["kits"]
-    end
-
-    def get_kits_pb_website
-      menu = YAML.load_file(Rails.root.join("config/menu.yml"))
+      menu = YAML.load_file(Playbook::Engine.root.join("app/pb_kits/playbook/data/menu.yml"))
       menu["kits"]
     end
     # rubocop:enable Naming/AccessorMethodName

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.9.1"
-  VERSION = "12.9.1.pre.alpha.menucleanup345"
+  VERSION = "12.9.1.pre.alpha.play664tiptapinvestigation353"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.9.1.pre.alpha.menucleanup345
+  version: 12.9.1.pre.alpha.play664tiptapinvestigation353
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-03-20 00:00:00.000000000 Z
+date: 2023-03-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -294,6 +294,7 @@ files:
 - Rakefile
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/_reset.scss
+- app/pb_kits/playbook/data/menu.yml
 - app/pb_kits/playbook/index.js
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.tsx
@@ -1706,6 +1707,7 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
+- app/pb_kits/playbook/pb_rich_text_editor/_tiptap.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
@@ -1723,6 +1725,7 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_tip_tap.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
@@ -2383,7 +2386,6 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
 - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
 - app/pb_kits/playbook/utilities/text.ts
-- dist/menu.yml
 - dist/reset.css
 - lib/playbook.rb
 - lib/playbook/align_content.rb