playbook_ui_docs 15.3.0.pre.alpha.PLAY2622richtexteditortiptaponlyrails12127 → 15.3.0.pre.alpha.PLAY2624stickyColumnnullerror12217
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +2 -10
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -19
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +1 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -2
- data/dist/playbook-doc.js +19 -1
- metadata +2 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default_rails.md +0 -7
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline_rails.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky_rails.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 04e79a350905a5acf32c1be8bd066350b60229940137a8a5d95a2e1b76352bcc
|
|
4
|
+
data.tar.gz: d8e7bd4c20ec75e47cf328d445d1f6db2ee882cb23aa48977d120dd9b10fb214
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 818b0b4985ae441678a550ccf20e9cac3ef32f511841579031bba87c4d44fe6c1ccc846d5f976c4a556d3f39c91dceceebbf2e71307a95c6e5fa8259b43c8ecc
|
|
7
|
+
data.tar.gz: 48f92a6f1a96547360322589d00f5ab56aa136fa5700d69366219545cfd8e6ee18ab38319811600f1a4476e29a1dc761ea5b4470a92a499b073c232355ed68b3
|
|
@@ -1,11 +1,3 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {
|
|
2
|
-
id: "focus-editor-1",
|
|
3
|
-
focus: true,
|
|
4
|
-
value: "Click inside to see the toolbar. Click outside to hide it."
|
|
5
|
-
}) %>
|
|
1
|
+
<%= pb_rails("rich_text_editor", props: {focus: true}) %>
|
|
6
2
|
<br>
|
|
7
|
-
<%= pb_rails("rich_text_editor", props: {
|
|
8
|
-
id: "focus-editor-2",
|
|
9
|
-
focus: true,
|
|
10
|
-
value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
|
|
11
|
-
}) %>
|
|
3
|
+
<%= pb_rails("rich_text_editor", props: {focus: true}) %>
|
|
@@ -1,38 +1,30 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {
|
|
2
|
-
id: "content-preview-editor",
|
|
3
|
-
margin_bottom: "md",
|
|
4
|
-
value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
|
|
5
|
-
}) %>
|
|
6
|
-
|
|
7
|
-
<%= pb_rails("button", props: { id: "preview-button", text: "Preview Output", variant: "secondary" }) %>
|
|
8
1
|
|
|
2
|
+
<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
|
|
9
3
|
<div id="card-obfuscation" style="display:none">
|
|
10
4
|
<%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
|
|
11
|
-
<div id="content-preview" class="
|
|
5
|
+
<div id="content-preview" class="trix-content">
|
|
12
6
|
</div>
|
|
13
7
|
<% end %>
|
|
14
8
|
</div>
|
|
9
|
+
<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
|
|
10
|
+
<span>Preview Output</span>
|
|
11
|
+
<% end %>
|
|
15
12
|
|
|
16
13
|
<script>
|
|
17
14
|
document.addEventListener('DOMContentLoaded', () => {
|
|
18
15
|
function handleButtonClick() {
|
|
19
|
-
// Find the specific TipTap editor container by ID
|
|
20
16
|
const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
|
|
21
17
|
.find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
|
|
22
18
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
// Find the TipTap editor content
|
|
29
|
-
const tiptapEditor = editorContainer.querySelector('.ProseMirror')
|
|
19
|
+
const editorElement = editorContainer?.querySelector('trix-editor')
|
|
20
|
+
const inputId = editorElement?.getAttribute('input')
|
|
21
|
+
const inputElement = inputId && document.getElementById(inputId)
|
|
22
|
+
|
|
23
|
+
const editorContent = inputElement?.value || ''
|
|
30
24
|
const previewArea = document.getElementById('content-preview')
|
|
31
25
|
const cardDiv = document.getElementById('card-obfuscation')
|
|
32
26
|
|
|
33
|
-
if (
|
|
34
|
-
// Get the HTML content from the TipTap editor
|
|
35
|
-
const editorContent = tiptapEditor.innerHTML || ''
|
|
27
|
+
if (previewArea && cardDiv) {
|
|
36
28
|
previewArea.innerHTML = editorContent
|
|
37
29
|
cardDiv.style.display = 'block'
|
|
38
30
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: {id: "sticky
|
|
1
|
+
<%= pb_rails("rich_text_editor", props: {id: "sticky", sticky: true, value: "In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."}) %>
|
|
@@ -3,10 +3,10 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- rich_text_editor_default: Default
|
|
5
5
|
- rich_text_editor_simple: Simple
|
|
6
|
-
|
|
6
|
+
- rich_text_editor_attributes: Attributes
|
|
7
7
|
- rich_text_editor_focus: Focus
|
|
8
8
|
- rich_text_editor_sticky: Sticky
|
|
9
|
-
|
|
9
|
+
- rich_text_editor_templates: Templates
|
|
10
10
|
# - rich_text_editor_toolbar_bottom: Toolbar Bottom
|
|
11
11
|
- rich_text_editor_inline: Inline
|
|
12
12
|
- rich_text_editor_preview: Preview
|