Merge pull request #971 from themesberg/wysiwyg

add wysiwyg plugin and examples
themesberg · Sep 27, 2024 · 26cb313 · 26cb313
2 parents b6081ad + 933b112
commit 26cb313
Show file tree

Hide file tree

Showing 17 changed files with 2,510 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -94,13 +94,13 @@ The quickest way to get started working with Flowbite is to simply include the C
 Require the following minified stylesheet inside the `head` tag:
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
 ```
 
 And include the following javascript file before the end of the `body` tag:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
 ```
 
 ### Bundled JavaScript
@@ -794,7 +794,7 @@ Check out Flowbite Blocks to get access to over 400+ website sections coded in T
 
 ## Flowbite Icons
 
-Start using over 430+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):
+Start using over 450+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):
 
 🔍 [Check out the icons](https://flowbite.com/icons/)
 

diff --git a/config.yml b/config.yml
@@ -5,7 +5,7 @@ enableInlineShortcodes: true
 
 params:
   homepage: "https://flowbite.com"
-  current_version: 2.5.1
+  current_version: 2.5.2
   authors: Themesberg
   social_image_path: /docs/images/og-image.png
 

diff --git a/content/getting-started/astro.md b/content/getting-started/astro.md
@@ -101,7 +101,7 @@ To enable the interactive components you need to also include Flowbite's JavaScr
 In the `Layout.astro` file add the following script tag just before the end of the `<body>` tag:
 
 ```html
-<script is:inline src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+<script is:inline src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
 ```
 
 This allows you to use the data attributes from the Flowbite component examples and will make them interactive automatically without needing to write custom JavaScript and you can just copy-paste them from the Flowbite Docs.

diff --git a/content/getting-started/blazor.md b/content/getting-started/blazor.md
@@ -219,7 +219,7 @@ module.exports = {
 
 ```bash
     <!-- ... -->
-    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
   </body>
 </html>
 ```

diff --git a/content/getting-started/changelog.md b/content/getting-started/changelog.md
@@ -15,6 +15,10 @@ nextLink: getting-started/react/
 
 We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.
 
+### v2.5.2
+
+- released WYSIWYG plugin component
+
 ### v2.5.1
 
 - fix plugin import error for the config file

diff --git a/content/getting-started/introduction.md b/content/getting-started/introduction.md
@@ -45,7 +45,7 @@ Here's a quick overview of the Flowbite ecosystem including the open source Tail
     </a>
     <a href="{{< param homepage >}}/pro/" class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
         <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Upgrade to Pro</h3>
-        <p class="font-normal text-gray-700 dark:text-gray-400">Check out over 430+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.</p>
+        <p class="font-normal text-gray-700 dark:text-gray-400">Check out over 450+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.</p>
     </a>
 </div>
 

diff --git a/content/plugins/datatables.md b/content/plugins/datatables.md
@@ -8,6 +8,9 @@ requires_js: true
 
 previous: Charts
 previousLink: plugins/charts/
+
+next: WYSIWYG
+nextLink: plugins/wysiwyg/
 ---
 
 The datatable component examples from Flowbite are open-source under the MIT License and they are based on the [simple-datatables](https://github.com/fiduswriter/simple-datatables) repository from GitHub which you need to install via NPM or CDN.
@@ -21,6 +24,7 @@ All examples are responsive, dark mode and RTL support included and by installin
 Before continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.
 
 1. Install Tailwind CSS and follow our <a href="{{< ref "getting-started/quickstart" >}}">quickstart guide</a> to install Flowbite and the official plugin
+
 2. Set the field `datatables` to the value `true` inside the `tailwind.config.js` file:
 
 ```javascript

diff --git a/content/plugins/wysiwyg.md b/content/plugins/wysiwyg.md
diff --git a/data/sidebar.yml b/data/sidebar.yml
@@ -20,25 +20,21 @@
         slug: nuxt-js
       - title: Svelte
       - title: Angular
-        new: true
       - title: Astro
       - title: Remix
       - title: Meteor.js
         slug: meteor-js
-        new: true
       - title: Gatsby
       - title: SolidJS
         slug: solid-js
       - title: Qwik
       - title: Laravel
-        new: true
       - title: Symfony
       - title: Rails
       - title: Phoenix
       - title: Django
       - title: Flask
       - title: Blazor
-        new: true
 
 - title: Customize
   slug: customize
@@ -67,9 +63,7 @@
       - title: Card
       - title: Carousel
       - title: Chat Bubble
-        new: true
       - title: Clipboard
-        new: true
       - title: Datepicker
       - title: Device Mockups
       - title: Drawer
@@ -108,13 +102,10 @@
       - title: File Input
       - title: Search Input
       - title: Number Input
-        new: true
       - title: Phone Input
-        new: true
       - title: Select
       - title: Textarea
       - title: Timepicker
-        new: true
       - title: Checkbox
       - title: Radio
       - title: Toggle
@@ -139,3 +130,5 @@
       - title: Charts
       - title: Datatables
         new: true
+      - title: WYSIWYG
+        new: true
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -6,7 +6,7 @@
       <div class='items-center md:flex'>
         <p class='text-sm font-medium text-gray-900 md:my-0 dark:text-white'>
           <span class='bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 hidden md:inline'>New</span>
-          We have launched Flowbite Blocks featuring over 430+ website sections!
+          We have launched Flowbite Blocks featuring over 450+ website sections!
             <a href="{{ .Site.Params.homepage }}/blocks/" class='inline-flex items-center ml-2 text-sm font-medium text-blue-600 md:ml-2 dark:text-blue-500 hover:underline'>
               Check it out
               <svg class="w-3 h-3 ml-1.5 text-blue-600 dark:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,5 +1,5 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
     integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
     crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="{{ .Site.BaseURL }}flowbite.min.js?v=2.5.1a"></script>
-<script src="{{ .Site.BaseURL }}docs.js?v=2.5.1a"></script>
+<script src="{{ .Site.BaseURL }}flowbite.min.js?v=2.5.2a"></script>
+<script src="{{ .Site.BaseURL }}docs.js?v=2.5.2a"></script>
diff --git a/layouts/partials/stylesheet.html b/layouts/partials/stylesheet.html
@@ -3,5 +3,5 @@
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" integrity="sha512-tN7Ec6zAFaVSG3TpNAKtk4DOHNpSwKHxxrsiw4GHKESGPs5njn/0sMCUMl2svV4wo4BK/rCP7juYz+zx+l6oeQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
-<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=2.5.1a">
-<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=2.5.1a">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}flowbite.css?v=2.5.2a">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}docs.css?v=2.5.2a">
diff --git a/layouts/shortcodes/example.html b/layouts/shortcodes/example.html
@@ -24,6 +24,9 @@
 {{- $skeletonPlaceholders := .Get "skeletonPlaceholders" | default false -}}
 
 {{ $javascript := .Get "javascript" | default "" | safeJS }}
+{{- $script_module := .Get "script_module" | default false -}}
+{{- $wysiwyg := .Get "wysiwyg" | default false -}}
+{{ $wysiwyg_json_fix := `{"imports": {"https://esm.sh/v135/prosemirror-model@1.22.3/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.22.1/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs"}}` }}
 
 {{- $initDatepicker := .Get "initDatepicker" | default false -}}
 {{- $charts := .Get "charts" | default false -}}
@@ -105,7 +108,7 @@
   <div class="code-preview-wrapper">
     <div{{ with .Get "id" }} id="{{ . }}"{{ end }} class="flex p-0 bg-white border-gray-200 bg-gradient-to-r code-preview dark:bg-gray-900 border-x dark:border-gray-600">
       <div class="w-full code-responsive-wrapper">
-        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}flowbite.css?v=2.5.1a'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/apexcharts'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/simple-datatables@9.0.4'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} {{ if $javascript }} {{ $javascript }} {{ end }} }</script></body></html>" frameborder="0"></iframe>
+        <iframe {{ if $id }}title="{{ replace $id "-" " "}}"{{ end }} class="w-full h-0 mx-auto bg-white dark:bg-gray-900 iframe-code" {{ if $iframeMaxHeight }}style='max-height: {{  sub (int $iframeMaxHeight) 40 }}px'{{ end }} srcdoc="<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><link rel='preconnect' href='https://fonts.googleapis.com'><link rel='preconnect' href='https://fonts.gstatic.com' crossorigin><link href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap' rel='stylesheet'><link rel='stylesheet' href='{{ .Site.BaseURL }}flowbite.css?v=2.5.2a'></head><body {{ if $iframeHeight }}style='height: {{  sub (int $iframeHeight) 40 }}px'{{ end }} class='p-5 bg-white dark:bg-gray-900 antialiased {{ if $bodyClass }}{{ $bodyClass }}{{ end }}'><div id='exampleWrapper' class='{{ if $class }}{{ $class }}{{ end }}'>{{- $input | safeHTMLAttr -}}{{ if $skeletonPlaceholders }}{{ $skeletonPlaceholdersMarkup }}{{ end }}</div><script src='{{ .Site.BaseURL }}flowbite.min.js'></script>{{ if $charts }}<script src='https://cdn.jsdelivr.net/npm/apexcharts'></script>{{ end }}{{ if $datatables }}<script src='https://cdn.jsdelivr.net/npm/simple-datatables@9.0.4'></script>{{ end }}<script>window.onload = function () { const anchorTags = document.querySelectorAll('a'); anchorTags.forEach(function(a){a.addEventListener('click', function(ev){ev.preventDefault();})}); {{ if not $disable_init_js }} const dropdownEl = document.querySelector('[data-dropdown-toggle]'); if (dropdownEl) {dropdownEl.click();} const modalEl = document.querySelector('[data-modal-toggle]'); if(modalEl) {modalEl.click(); } {{ if $initDatepicker }} const datepickerEl = document.querySelector('[datepicker]'); if (datepickerEl) { datepickerEl.focus({preventScroll: true}); } {{ end }} const dateRangePickerEl = document.querySelector('[data-rangepicker] input'); if (dateRangePickerEl) { dateRangePickerEl.focus(); } const drawerEl = document.querySelector('[data-drawer-show]'); if (drawerEl) { drawerEl.click(); } {{ end }} }</script>{{ if $wysiwyg }}<script type='importmap'>{{ $wysiwyg_json_fix | safeHTML }}</script>{{ end }}{{ if $javascript }} <script {{ if $script_module }}type='module'{{ end }}>{{ $javascript }}</script>{{ end }}</body></html>" frameborder="0"></iframe>
         <div class="flex items-center justify-center w-full p-5 bg-white dark:bg-gray-900" data-component-loader>
           <div role="status">
             <svg aria-hidden="true" class="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flowbite",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "The most popular library of interactive components built with Tailwind CSS",
   "keywords": [
     "flowbite",
@@ -85,6 +85,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-tailwindcss": "^3.7.1",
     "file-loader": "^6.2.0",
+    "flowbite-typography": "^1.0.4",
     "mini-css-extract-plugin": "^1.3.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.6",
@@ -108,8 +109,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.9.3",
-    "mini-svg-data-uri": "^1.4.3",
-    "flowbite-datepicker": "^1.3.0"
+    "flowbite-datepicker": "^1.3.0",
+    "mini-svg-data-uri": "^1.4.3"
   },
   "files": [
     "lib",

diff --git a/plugin.js b/plugin.js
@@ -15,6 +15,7 @@ module.exports = plugin.withOptions(
             datatables = false,
             forms = true,
             tooltips = true,
+            wysiwyg = false,
         } = options;
 
         return function ({ addBase, addComponents, theme }) {
@@ -529,6 +530,23 @@ module.exports = plugin.withOptions(
                 });
             }
 
+            if (wysiwyg) {
+                addComponents({
+                    '.selectedCell': {
+                        backgroundColor: `${theme(
+                            'colors.gray.50',
+                            colors.gray[50]
+                        )}`,
+                    },
+                    '.dark .selectedCell': {
+                        backgroundColor: `${theme(
+                            'colors.gray.700',
+                            colors.gray[700]
+                        )}`,
+                    },
+                });
+            }
+
             // datatable styles
             if (datatables) {
                 addComponents({
@@ -1269,6 +1287,7 @@ module.exports = plugin.withOptions(
             datatables = false,
             forms = true,
             tooltips = true,
+            wysiwyg = false,
         } = options;
 
         const safelist = [
@@ -1289,6 +1308,7 @@ module.exports = plugin.withOptions(
             'shadow-lg',
             '!bg-gray-50',
             'dark:!bg-gray-700',
+            'selectedCell',
         ];
 
         if (charts) {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -77,6 +77,8 @@ module.exports = {
             forms: true,
             tooltips: true,
             datatables: true,
+            wysiwyg: true,
         }),
+        require('flowbite-typography'),
     ],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -219,7 +219,7 @@ module.exports = { @@
     ```bash
         <!-- ... -->
-        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
       </body>
     </html>
     ```
@@ Expand Down @@