Skip to content

Commit 30f5133

Browse files
zoltanszogyenyizoltanszogyenyi
committed
feat(wysiwyg): add next and prev cell navigation butoons
1 parent 6e4cb24 commit 30f5133

File tree

1 file changed

+59
-11
lines changed

1 file changed

+59
-11
lines changed

‎content/plugins/wysiwyg.md

Lines changed: 59 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1796,6 +1796,21 @@ window.addEventListener('load', function() {
17961796
document.getElementById('mergeCellsButton').addEventListener('click', () => {
17971797
editor.chain().focus().mergeCells().run();
17981798
});
1799+
1800+
// split cells
1801+
document.getElementById('splitCellsButton').addEventListener('click', () => {
1802+
editor.chain().focus().splitCell().run();
1803+
});
1804+
1805+
// go to previous cell
1806+
document.getElementById('previousCellButton').addEventListener('click', () => {
1807+
editor.chain().focus().goToPreviousCell().run();
1808+
});
1809+
1810+
// go to the next cell
1811+
document.getElementById('nextCellButton').addEventListener('click', () => {
1812+
editor.chain().focus().goToNextCell().run();
1813+
});
17991814
}
18001815
})
18011816
` >}}
@@ -1891,18 +1906,51 @@ window.addEventListener('load', function() {
18911906
</div>
18921907
</div>
18931908
</div>
1894-
<div class="flex items-center space-x-1 rtl:space-x-reverse flex-wrap">
1895-
<button id="mergeCellsButton" type="button" data-tooltip-target="tooltip-merge-cells" class="p-1.5 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
1896-
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1897-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 18.5v2H4v-16h6v2m4 12v2h6v-16h-6v2m-6.49543 8.4954L10 12.5m0 0-2.49543-2.4954M10 12.5H4.05191m12.50199 2.5539L14 12.5m0 0 2.5539-2.55392M14 12.5h5.8319"/>
1898-
</svg>
1899-
<span class="sr-only">Merge cells</span>
1900-
</button>
1901-
<div id="tooltip-merge-cells" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
1902-
Mergre cells
1903-
<div class="tooltip-arrow" data-popper-arrow></div>
1904-
</div>
1909+
<div class="flex items-center space-x-1 rtl:space-x-reverse flex-wrap">
1910+
<button id="mergeCellsButton" type="button" data-tooltip-target="tooltip-merge-cells" class="p-1.5 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
1911+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1912+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 18.5v2H4v-16h6v2m4 12v2h6v-16h-6v2m-6.49543 8.4954L10 12.5m0 0-2.49543-2.4954M10 12.5H4.05191m12.50199 2.5539L14 12.5m0 0 2.5539-2.55392M14 12.5h5.8319"/>
1913+
</svg>
1914+
<span class="sr-only">Merge cells</span>
1915+
</button>
1916+
<div id="tooltip-merge-cells" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
1917+
Merge cells
1918+
<div class="tooltip-arrow" data-popper-arrow></div>
19051919
</div>
1920+
<button id="splitCellsButton" type="button" data-tooltip-target="tooltip-split-cells" class="p-1.5 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
1921+
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1922+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18.5v2h6v-16H4v2m16 12v2h-6v-16h6v2M6.49545 14.9954 4.00003 12.5m0 0 2.49542-2.4954M4.00003 12.5h5.94809m7.49798 2.5539L20 12.5m0 0-2.5539-2.55392M20 12.5h-5.8319"/>
1923+
</svg>
1924+
<span class="sr-only">Split cells</span>
1925+
</button>
1926+
<div id="tooltip-split-cells" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
1927+
Split cells
1928+
<div class="tooltip-arrow" data-popper-arrow></div>
1929+
</div>
1930+
<div class="px-1">
1931+
<span class="block w-px h-4 bg-gray-300 dark:bg-gray-600"></span>
1932+
</div>
1933+
<button id="previousCellButton" type="button" data-tooltip-target="tooltip-previous-cell" class="p-1.5 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
1934+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1935+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m5.9001-1.0999L16 16.5m0 0 1.9001-1.9001M16 16.5h5"/>
1936+
</svg>
1937+
<span class="sr-only">Previous cell</span>
1938+
</button>
1939+
<div id="tooltip-previous-cell" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
1940+
Previous cell
1941+
<div class="tooltip-arrow" data-popper-arrow></div>
1942+
</div>
1943+
<button id="nextCellButton" type="button" data-tooltip-target="tooltip-next-cell" class="p-1.5 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
1944+
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
1945+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15.5v3c0 .5523.44772 1 1 1h9.5M3 15.5v-4m0 4h9m-9-4v-5c0-.55228.44772-1 1-1h16c.5523 0 1 .44772 1 1v5H3Zm5 0v8m4-8v8m7.0999-1.0999L21 16.5m0 0-1.9001-1.9001M21 16.5h-5"/>
1946+
</svg>
1947+
<span class="sr-only">Next cell</span>
1948+
</button>
1949+
<div id="tooltip-next-cell" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
1950+
Next cell
1951+
<div class="tooltip-arrow" data-popper-arrow></div>
1952+
</div>
1953+
</div>
19061954
</div>
19071955
<div class="px-4 py-2 bg-white rounded-b-lg dark:bg-gray-800">
19081956
<label for="wysiwyg-tables-example" class="sr-only">Publish post</label>

0 commit comments

Comments
 (0)