Skip to content

Commit

Permalink
wip: bus testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@awcodes
awcodes committed Nov 6, 2023
1 parent 66814ab commit 78fc989
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 69 deletions.
18 changes: 18 additions & 0 deletions resources/css/plugin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,24 @@
width: 100%;
color: theme('colors.black');

.tiptap-block-wrapper {
@apply rounded-xl overflow-hidden bg-gray-200 dark:bg-gray-700;

.tiptap-block {
.tiptap-block-heading {
@apply flex items-center justify-between bg-gray-300 dark:bg-gray-800 py-1 px-3 leading-none;

.tiptap-block-title {
@apply text-sm uppercase font-bold opacity-80;
}
}

.preview {
@apply p-4;
}
}
}

.filament-tiptap-hurdle {
width: 100%;
max-width: 100vw;
Expand Down
42 changes: 42 additions & 0 deletions resources/dist/filament-tiptap-editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,48 @@ SOFTWARE.
color: #000;
}

.tiptap-editor .ProseMirror .tiptap-block-wrapper {
overflow: hidden;
border-radius: 0.75rem;
--tw-bg-opacity: 1;
background-color: rgba(var(--gray-200), var(--tw-bg-opacity));
}

:is(.dark .tiptap-editor .ProseMirror .tiptap-block-wrapper) {
--tw-bg-opacity: 1;
background-color: rgba(var(--gray-700), var(--tw-bg-opacity));
}

.tiptap-editor .ProseMirror .tiptap-block-wrapper .tiptap-block .tiptap-block-heading {
display: flex;
align-items: center;
justify-content: space-between;
--tw-bg-opacity: 1;
background-color: rgba(var(--gray-300), var(--tw-bg-opacity));
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
line-height: 1;
}

:is(.dark .tiptap-editor .ProseMirror .tiptap-block-wrapper .tiptap-block .tiptap-block-heading) {
--tw-bg-opacity: 1;
background-color: rgba(var(--gray-800), var(--tw-bg-opacity));
}

.tiptap-editor .ProseMirror .tiptap-block-wrapper .tiptap-block .tiptap-block-heading .tiptap-block-title {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
text-transform: uppercase;
opacity: 0.8;
}

.tiptap-editor .ProseMirror .tiptap-block-wrapper .tiptap-block .preview {
padding: 1rem;
}

.tiptap-editor .ProseMirror .filament-tiptap-hurdle {
width: 100%;
max-width: 100vw;
Expand Down
66 changes: 35 additions & 31 deletions resources/dist/filament-tiptap-editor.js
View file

Large diffs are not rendered by default.

60 changes: 30 additions & 30 deletions resources/js/extensions/TiptapBlock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ export const TiptapBlock = Node.create({
defining: true,
allowGapCursor: true,
inline: false,
addStorage() {
return {
preview: null
}
},
addAttributes() {
return {
view: {
Expand All @@ -29,7 +34,7 @@ export const TiptapBlock = Node.create({
'data-block-data': attributes.blockData ?? ''
}
}
}
},
}
},
parseHTML() {
Expand All @@ -44,45 +49,39 @@ export const TiptapBlock = Node.create({
},
addNodeView() {
return ({node, extension, getPos, editor}) => {
const { view } = editor
const dom = document.createElement('div')
dom.setAttribute('data-block-view', node.attrs.view)
dom.setAttribute('data-block-data', node.attrs.blockData)
dom.setAttribute('wire:ignore.self', 'true')
dom.classList.add('relative')

let dataRender = '';

for (const [key, value] of Object.entries(node.attrs.blockData)) {
dataRender = dataRender + (`<p>${key}: ${value}</p>`);
}

window.addEventListener('update-block', (event) => {
console.log(event);
setTimeout(() => {
node.attrs.blockData = JSON.stringify(event.detail.data)
editor.commands.focus()
}, 500)
})
dom.classList.add('tiptap-block-wrapper')

dom.innerHTML = `
<div x-data='{
preview() {
this.$dispatch("preview-block", {view: "${node.attrs.view}", data: ${JSON.stringify(node.attrs.blockData)}})
},
openSettings() {
this.$dispatch("render-bus", {view: "${node.attrs.view}", data: ${JSON.stringify(node.attrs.blockData)}})
}
}' class="relative p-4" style="min-height: 3rem;">
<div class="absolute top-2 right-2 flex items-center gap-2">
<button type="button" x-on:click="preview">Preview</button>
<button type="button" x-on:click="openSettings">Settings</button>
}' class="tiptap-block" style="min-height: 3rem;">
<div class="tiptap-block-heading">
<h3 class="tiptap-block-title">${node.attrs.name ?? 'Custom Block'}</h3>
<div class="tiptap-block-actions">
<button type="button" x-on:click="openSettings">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
<h3>${node.attrs.name ?? 'Custom Block'}</h3>
${dataRender}
<div class="preview"></div>
</div>
`;

let preview = dom.querySelector('.preview')
preview.innerHTML = extension.storage.preview

window.addEventListener('update-block', (event) => {
node.attrs.blockData = JSON.stringify(event.detail.data)
preview.innerHTML = event.detail.preview
editor.commands.setNodeSelection(getPos())
})

return {
dom,
}
Expand All @@ -91,7 +90,8 @@ export const TiptapBlock = Node.create({
addCommands() {
return {
insertBlock: (attributes) => ({ commands }) => {
return commands.setNode(this.name, attributes)
this.storage.preview = attributes.preview
return commands.setNode(this.name, attributes.block)
},
removeBlock: () => ({ commands }) => {
return commands.deleteNode(this.name)
Expand Down
12 changes: 8 additions & 4 deletions resources/js/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ export default function tiptap({
isActive(state, 'oembed') ||
isActive(state, 'vimeo') ||
isActive(state, 'youtube') ||
isActive(state, 'video')
isActive(state, 'video') ||
isActive(state, 'tiptapBlock')
);
},
}))
Expand Down Expand Up @@ -457,10 +458,13 @@ export default function tiptap({
asymmetricRight
}).run();
},
insertBlock({view, data}) {
insertBlock({view, data, preview}) {
this.editor().commands.insertBlock({
view,
blockData: data
block: {
view,
blockData: data,
},
preview
});
}
};
Expand Down
2 changes: 1 addition & 1 deletion resources/views/tiptap-editor.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900"
@endforeach
<button
type="button"
x-on:click="$dispatch('render-bus', { view: 'blah-block', data: @Js(['test' => 'blah']) })"
x-on:click="$dispatch('render-bus', { view: 'blah-block', data: @Js(['name' => 'robin', 'color' => 'yellow']) })"
>bus</button>
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/Livewire/Bus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ public function renderBus($view, $data): void
}

#[On('close-modal')]
public function insertBlock($id, $data = null): void
public function insertBlock($id, $data = null, $preview = ''): void
{
$data = $data ?? $this->data;

if ($id === 'tiptap-bus') {
if ($data !== $this->data) {
ray('update-block');
$this->dispatch('update-block', view: $this->view, data: $data);
$this->dispatch('update-block', view: $this->view, data: $data, preview: $preview);
} else {
$this->dispatch('insert-block', view: $this->view, data: $data);
$this->dispatch('insert-block', view: $this->view, data: $data, preview: $preview);
}
}
}
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ module.exports = {
darkMode: 'class',
content: [
'./resources/views/**/*.blade.php',
'./resources/js/**/*.js',
'./src/**/*.php'
],
theme: {
Expand Down

0 comments on commit 78fc989

Please sign in to comment.