Fix frontend output

robaimes · Aug 28, 2022 · e5173e6 · e5173e6
1 parent fd422b5
commit e5173e6
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 50 deletions.
diff --git a/Model/Source/Languages.php b/Model/Source/Languages.php
@@ -27,7 +27,7 @@ public function __construct(
     }
 
     /**
-     * Get all supported language options with a 'No longuage' option
+     * Get all supported language options with a 'No language' option
      *
      * @return array
      */

diff --git a/etc/adminhtml/di.xml b/etc/adminhtml/di.xml
@@ -22,17 +22,65 @@
         <arguments>
             <argument name="languages" xsi:type="array">
                 <item name="javascript" xsi:type="array">
-                    <item name="value" xsi:type="string">javascript</item>
+                    <item name="value" xsi:type="string">language-javascript</item>
                     <item name="label" translate="true" xsi:type="string">JavaScript</item>
                 </item>
                 <item name="php" xsi:type="array">
-                    <item name="value" xsi:type="string">php</item>
+                    <item name="value" xsi:type="string">language-php</item>
                     <item name="label" translate="true" xsi:type="string">PHP</item>
                 </item>
                 <item name="xml" xsi:type="array">
-                    <item name="value" xsi:type="string">xml</item>
+                    <item name="value" xsi:type="string">language-xml</item>
                     <item name="label" translate="true" xsi:type="string">XML</item>
                 </item>
+                <item name="html" xsi:type="array">
+                    <item name="value" xsi:type="string">language-html</item>
+                    <item name="label" translate="true" xsi:type="string">HTML</item>
+                </item>
+                <item name="css" xsi:type="array">
+                    <item name="value" xsi:type="string">language-css</item>
+                    <item name="label" translate="true" xsi:type="string">CSS</item>
+                </item>
+                <item name="sql" xsi:type="array">
+                    <item name="value" xsi:type="string">language-sql</item>
+                    <item name="label" translate="true" xsi:type="string">SQL</item>
+                </item>
+                <item name="json" xsi:type="array">
+                    <item name="value" xsi:type="string">language-json</item>
+                    <item name="label" translate="true" xsi:type="string">JSON</item>
+                </item>
+                <item name="diff" xsi:type="array">
+                    <item name="value" xsi:type="string">language-diff</item>
+                    <item name="label" translate="true" xsi:type="string">Diff</item>
+                </item>
+                <item name="less" xsi:type="array">
+                    <item name="value" xsi:type="string">language-less</item>
+                    <item name="label" translate="true" xsi:type="string">LESS</item>
+                </item>
+                <item name="sass" xsi:type="array">
+                    <item name="value" xsi:type="string">language-sass</item>
+                    <item name="label" translate="true" xsi:type="string">SASS</item>
+                </item>
+                <item name="plaintext" xsi:type="array">
+                    <item name="value" xsi:type="string">language-plaintext</item>
+                    <item name="label" translate="true" xsi:type="string">Plaintext</item>
+                </item>
+                <item name="shell" xsi:type="array">
+                    <item name="value" xsi:type="string">language-shell</item>
+                    <item name="label" translate="true" xsi:type="string">Shell</item>
+                </item>
+                <item name="yaml" xsi:type="array">
+                    <item name="value" xsi:type="string">language-yaml</item>
+                    <item name="label" translate="true" xsi:type="string">YAML</item>
+                </item>
+                <item name="graphql" xsi:type="array">
+                    <item name="value" xsi:type="string">language-graphql</item>
+                    <item name="label" translate="true" xsi:type="string">GraphQL</item>
+                </item>
+                <item name="dockerfile" xsi:type="array">
+                    <item name="value" xsi:type="string">language-dockerfile</item>
+                    <item name="label" translate="true" xsi:type="string">Dockerfile</item>
+                </item>
             </argument>
         </arguments>
     </type>

diff --git a/etc/di.xml b/etc/di.xml
diff --git a/view/adminhtml/pagebuilder/content_type/code_block.xml b/view/adminhtml/pagebuilder/content_type/code_block.xml
@@ -40,8 +40,8 @@
                         <css name="css_classes"/>
                     </element>
                     <element name="code">
-                        <html name="content" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
-                        <attribute name="language" source="data-language"/>
+                        <html name="content"/>
+                        <css name="language"/>
                     </element>
                 </elements>
             </appearance>

diff --git a/view/adminhtml/ui_component/pagebuilder_code_block_form.xml b/view/adminhtml/ui_component/pagebuilder_code_block_form.xml
@@ -88,9 +88,7 @@
                 <label translate="true">Content</label>
             </settings>
         </field>
-        <field name="language"
-               formElement="select"
-               sortOrder="20">
+        <field name="language" sortOrder="20" formElement="select">
             <settings>
                 <dataType>text</dataType>
             </settings>

diff --git a/view/adminhtml/web/template/content-type/code-block/default/master.html b/view/adminhtml/web/template/content-type/code-block/default/master.html
@@ -8,5 +8,8 @@
      ko-style="data.main.style"
      class="pagebuilder-content-type-code-block"
      css="data.main.css">
-    <pre><code attr="data.code.attributes" text="data.code.html"></code></pre>
+    <pre><code class="hljs"
+               attr="data.code.attributes"
+               css="data.code.css"
+               text="data.code.html"></code></pre>
 </div>
diff --git a/view/adminhtml/web/template/content-type/code-block/default/preview.html b/view/adminhtml/web/template/content-type/code-block/default/preview.html
@@ -10,5 +10,8 @@
      css="data.main.css"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
     <render args="getOptions().template"></render>
-    <pre><code attr="data.code.attributes" text="data.code.html"></code></pre>
+    <pre><code class="hljs"
+               attr="data.code.attributes"
+               css="data.code.css"
+               text="data.code.html"></code></pre>
 </div>
diff --git a/view/base/layout/default.xml b/view/base/layout/default.xml
@@ -9,5 +9,6 @@
       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
         <css src="Aimes_PageBuilderCodeBlock::css/androidstudio.min.css"/>
+        <css src="Aimes_PageBuilderCodeBlock::css/highlight-copy.min.css"/>
     </head>
 </page>
diff --git a/view/base/web/css/highlight-copy.min.css b/view/base/web/css/highlight-copy.min.css
diff --git a/view/base/web/js/content-type/code-block/appearance/default/widget.js b/view/base/web/js/content-type/code-block/appearance/default/widget.js
diff --git a/view/base/web/js/lib/highlight-copy.min.js b/view/base/web/js/lib/highlight-copy.min.js
diff --git a/view/frontend/layout/default.xml b/view/frontend/layout/default.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Rob Aimes - https://aimes.dev/
+ * https://github.com/robaimes
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <head>
+        <script src="Aimes_PageBuilderCodeBlock::js/init-code-block.js" defer="defer"/>
+    </head>
+</page>
diff --git a/view/frontend/web/js/init-code-block.js b/view/frontend/web/js/init-code-block.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright © Rob Aimes - https://aimes.dev/
+ * https://github.com/robaimes
+ */
+require([
+    'Aimes_PageBuilderCodeBlock/js/lib/highlight.min',
+    'Aimes_PageBuilderCodeBlock/js/lib/highlight-copy.min',
+], function () {
+    'use strict';
+
+    /** Apply plugins and initialise code block highlighting */
+    hljs.addPlugin(new CopyButtonPlugin());
+    hljs.highlightAll();
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ public function __construct( @@
         }
         /**
-         * Get all supported language options with a 'No longuage' option
+         * Get all supported language options with a 'No language' option
          *
          * @return array
          */
@@ Expand Down @@