class sort feature

wind-press · Jul 12, 2024 · 9651cb5 · 9651cb5
1 parent 2a0c03d
commit 9651cb5
Show file tree

Hide file tree

Showing 12 changed files with 114 additions and 23 deletions.
diff --git a/assets/integration/bricks/modules/plain-classses/main.js b/assets/integration/bricks/modules/plain-classses/main.js
@@ -54,7 +54,7 @@ const classSortButton = document.createRange().createContextualFragment(/*html*/
         <svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" class="bricks-svg icon icon-tabler icons-tabler-outline icon-tabler-reorder"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3" /><path d="M16.5 8.5l2.5 2.5l2.5 -2.5" /></svg>    
     </span>
 `).querySelector('#windpressbricks-plc-class-sort');
-// containerActionButtons.appendChild(classSortButton);
+containerActionButtons.appendChild(classSortButton);
 
 const visibleElementPanel = ref(false);
 const activeElementId = ref(null);
@@ -264,7 +264,7 @@ textInput.addEventListener('highlights-updated', function (e) {
 });
 
 function hoverPreviewProvider() {
-    if (brxIframe.contentWindow.siul?.loaded?.module?.classNameToCss !== true) {
+    if (brxIframe.contentWindow.windpress?.loaded?.module?.classNameToCss !== true) {
         return;
     }
 
@@ -326,7 +326,7 @@ function hoverPreviewProvider() {
             registeredTippyElements = [];
         }
 
-        const generatedCssCode = brxIframe.contentWindow.siul.module.classNameToCss.generate(detectedMarkWordElement.textContent);
+        const generatedCssCode = brxIframe.contentWindow.windpress.module.classNameToCss.generate(detectedMarkWordElement.textContent);
         if (generatedCssCode === null) {
             return null;
         };
@@ -432,12 +432,12 @@ textInput.addEventListener('tribute-active-true', function (e) {
     });
 });
 
-classSortButton.addEventListener('click', function (e) {
-    if (brxIframe.contentWindow.siul?.loaded?.module?.classSorter !== true) {
+classSortButton.addEventListener('click', async function (e) {
+    if (brxIframe.contentWindow.windpress?.loaded?.module?.classSorter !== true) {
         return;
     }
 
-    textInput.value = brxIframe.contentWindow.siul.module.classSorter.sort(textInput.value);
+    textInput.value = await brxIframe.contentWindow.windpress.module.classSorter.sort(textInput.value);
     brxGlobalProp.$_activeElement.value.settings._cssClasses = textInput.value;
     onTextInputChanges();
 });

diff --git a/assets/integration/oxygen/editor/modules/plain-classses/main.js b/assets/integration/oxygen/editor/modules/plain-classses/main.js
@@ -54,7 +54,7 @@ const classSortButton = document.createRange().createContextualFragment(/*html*/
             <svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round" class="oxygen-svg icon icon-tabler icons-tabler-outline icon-tabler-reorder"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M17 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" /><path d="M5 11v-3a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v3" /><path d="M16.5 8.5l2.5 2.5l2.5 -2.5" /></svg>    
         </span>
 `).querySelector('#windpressoxygen-plc-class-sort');
-// containerActionButtons.appendChild(classSortButton);
+containerActionButtons.appendChild(classSortButton);
 
 const visibleElementPanel = ref(false);
 const activeElementId = ref(null);
@@ -471,12 +471,12 @@ textInput.addEventListener('tribute-active-true', function (e) {
     });
 });
 
-classSortButton.addEventListener('click', function (e) {
+classSortButton.addEventListener('click', async function (e) {
     if (oxyIframe.contentWindow.windpress?.loaded?.module?.classSorter !== true) {
         return;
     }
 
-    textInput.value = oxyIframe.contentWindow.windpress.module.classSorter.sort(textInput.value);
+    textInput.value = await oxyIframe.contentWindow.windpress.module.classSorter.sort(textInput.value);
     setPlainClassAttribute(textInput.value);
 
     onTextInputChanges();

diff --git a/assets/packages/core/tailwind/index.js b/assets/packages/core/tailwind/index.js
@@ -1,4 +1,4 @@
 export { bundle } from './bundle.js';
 export { build, optimize } from './build.js';
 export { find_tw_candidates } from '@windpress/oxide-parser-wasm';
-export { getClassList, getVariableList } from './intellisense.js';
+export { getClassList, getVariableList, sortClasses } from './intellisense.js';
diff --git a/assets/packages/core/tailwind/intellisense.js b/assets/packages/core/tailwind/intellisense.js
@@ -77,7 +77,14 @@ export function getClassList(theme) {
      * @param {ClassEntity} z - The second class entity.
      */
     const sortselectors = (a, z) => {
-        return compare(a.selector, z.selector);
+        // if prefix with '-' then sort it to the end, otherwise sort it normally
+        if (a.selector.startsWith('-') && !z.selector.startsWith('-')) {
+            return 1;
+        } else if (!a.selector.startsWith('-') && z.selector.startsWith('-')) {
+            return -1;
+        } else {
+            return compare(a.selector, z.selector);
+        }
     }
 
     return classList
@@ -146,3 +153,41 @@ export function getVariableList(theme) {
         }
     );
 }
+
+/**
+ * @param {string|DesignSystem} theme 
+ * @param {Array<string>} classList 
+ * @returns 
+ */
+export function sortClasses(theme, classList) {
+    let design;
+
+    if (typeof theme === 'string') {
+        design = __unstable__loadDesignSystem(theme);
+    } else {
+        design = theme;
+    }
+
+    return defaultSort(design.getClassOrder(classList));
+}
+
+function defaultSort(arrayOfTuples) {
+    return arrayOfTuples
+        .sort(([, a], [, z]) => {
+            if (a === z) return 0;
+            if (a === null) return -1;
+            if (z === null) return 1;
+            return bigSign(a - z);
+        })
+        .map(([className]) => className);
+}
+
+function bigSign(value) {
+    if (value > 0n) {
+        return 1;
+    } else if (value === 0n) {
+        return 0;
+    } else {
+        return -1;
+    }
+}
diff --git a/assets/packages/core/tailwind/sort.js b/assets/packages/core/tailwind/sort.js
@@ -0,0 +1,36 @@
+import { __unstable__loadDesignSystem } from 'tailwindcss';
+import { set } from 'lodash-es';
+import { bundle } from './bundle';
+import { sortClasses } from './intellisense';
+
+async function getCssContent() {
+    const mainCssElement = document.querySelector('script[type="text/tailwindcss"]');
+    const mainCssContent = mainCssElement?.textContent ? atob(mainCssElement.textContent) : `@import "tailwindcss"`;
+
+    const bundleResult = await bundle({
+        entrypoint: '/main.css',
+        volume: {
+            '/main.css': mainCssContent,
+        }
+    });
+
+    return bundleResult.css;
+}
+
+async function classSorter(input) {
+    let classes = input
+        .split(/\s+/)
+        .filter((x) => x !== "" && x !== "|");
+
+    const design = __unstable__loadDesignSystem(await getCssContent());
+
+    return sortClasses(design, classes).join(" ");
+}
+
+// if the wp-hooks is available
+if (window.wp?.hooks) {
+    window.wp.hooks.addFilter('windpress.module.class-sorter', 'windpress', classSorter);
+}
+
+set(window, 'windpress.loaded.module.classSorter', true);
+set(window, 'windpress.module.classSorter.sort', async (input) => classSorter(input));
diff --git a/src/Core/Runtime.php b/src/Core/Runtime.php
@@ -150,17 +150,21 @@ public function enqueue_play_cdn($display = true)
         // Script content are base64 encoded to prevent it from being executed by the browser.
         // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
         echo sprintf("<script type=\"text/tailwindcss\">%s</script>", base64_encode($main_css));
-        
+
         AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwind/autocomplete.js', [
             'handle' => WIND_PRESS::WP_OPTION . ':autocomplete',
             'in-footer' => true,
         ]);
 
+        AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwind/sort.js', [
+            'handle' => WIND_PRESS::WP_OPTION . ':sort',
+            'in-footer' => true,
+        ]);
+
         AssetVite::get_instance()->enqueue_asset('assets/packages/core/tailwind/observer.js', [
             'handle' => WIND_PRESS::WP_OPTION . ':observer',
             'in-footer' => true,
         ]);
-
     }
 
     public function enqueue_front_panel()

diff --git a/src/Integration/Blockstudio/Main.php b/src/Integration/Blockstudio/Main.php
@@ -24,6 +24,7 @@ class Main implements IntegrationInterface
 {
     public function __construct()
     {
+        return;
         add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
 
         if ($this->is_enabled()) {

diff --git a/src/Integration/Breakdance/Main.php b/src/Integration/Breakdance/Main.php
@@ -23,6 +23,7 @@ class Main implements IntegrationInterface
 {
     public function __construct()
     {
+        return;
         add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
 
         // if ($this->is_enabled()) {

diff --git a/src/Integration/GreenShift/Main.php b/src/Integration/GreenShift/Main.php
@@ -23,6 +23,7 @@ class Main implements IntegrationInterface
 {
     public function __construct()
     {
+        return;
         add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
 
         if ($this->is_enabled()) {

diff --git a/src/Integration/Gutenberg/Main.php b/src/Integration/Gutenberg/Main.php
@@ -25,6 +25,7 @@ class Main implements IntegrationInterface
 {
     public function __construct()
     {
+        return;
         add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
 
         if ($this->is_enabled()) {
@@ -69,15 +70,15 @@ public function enqueue_block_editor_assets()
         }
     }
 
-    public function admin_head()
-    {
-        Runtime::get_instance()->enqueue_importmap();
-        Runtime::get_instance()->enqueue_play_cdn();
+    // public function admin_head()
+    // {
+    //     Runtime::get_instance()->enqueue_importmap();
+    //     Runtime::get_instance()->enqueue_play_cdn();
 
-        if (strpos($_SERVER['REQUEST_URI'], 'site-editor.php') !== false) {
-            wp_enqueue_script(WIND_PRESS::WP_OPTION . '-gutenberg-fse', plugin_dir_url(WIND_PRESS::FILE) . 'build/public/gutenberg/fse.js', [], WIND_PRESS::VERSION, true);
-        } else {
-            wp_enqueue_script(WIND_PRESS::WP_OPTION . '-gutenberg-observer', plugin_dir_url(WIND_PRESS::FILE) . 'build/public/gutenberg/observer.js', [], WIND_PRESS::VERSION, true);
-        }
-    }
+    //     if (strpos($_SERVER['REQUEST_URI'], 'site-editor.php') !== false) {
+    //         wp_enqueue_script(WIND_PRESS::WP_OPTION . '-gutenberg-fse', plugin_dir_url(WIND_PRESS::FILE) . 'build/public/gutenberg/fse.js', [], WIND_PRESS::VERSION, true);
+    //     } else {
+    //         wp_enqueue_script(WIND_PRESS::WP_OPTION . '-gutenberg-observer', plugin_dir_url(WIND_PRESS::FILE) . 'build/public/gutenberg/observer.js', [], WIND_PRESS::VERSION, true);
+    //     }
+    // }
 }
diff --git a/src/Integration/Kadence/Main.php b/src/Integration/Kadence/Main.php
@@ -23,6 +23,7 @@ class Main implements IntegrationInterface
 {
     public function __construct()
     {
+        return;
         add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
 
         if ($this->is_enabled()) {

diff --git a/vite.config.js b/vite.config.js
@@ -24,6 +24,7 @@ export default defineConfig({
                 // Tailwind
                 'packages/core/tailwind/observer': 'assets/packages/core/tailwind/observer.js',
                 'packages/core/tailwind/autocomplete': 'assets/packages/core/tailwind/autocomplete.js',
+                'packages/core/tailwind/sort': 'assets/packages/core/tailwind/sort.js',
 
                 // Integrations
                 'integration/bricks': 'assets/integration/bricks/main.js',
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ class Main implements IntegrationInterface @@
     {
         public function __construct()
         {
+            return;
             add_filter('f!windpress/core/cache:compile.providers', fn (array $providers): array => $this->register_provider($providers));
             if ($this->is_enabled()) {
@@ Expand Down @@