Merge pull request #21 from murdercode/Joemires/master

Protect feature
murdercode · Aug 21, 2023 · 49b3bba · 49b3bba
2 parents d4eaacc + 3e72bdf
commit 49b3bba
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 62 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,8 @@ and dynamic editing capabilities.
 ## Extra
 
 > [!IMPORTANT]
-> Want some steroids for your TinyMCE? [Check out](https://github.com/The-3Labs-Team/tinymce-chatgpt-plugin) our new **ChatGTP for TinyMCE** plugin! 🚀🚀🚀
+> Want some steroids for your TinyMCE? [Check out](https://github.com/The-3Labs-Team/tinymce-chatgpt-plugin) our new *
+*ChatGTP for TinyMCE** plugin! 🚀🚀🚀
 
 ## Demo & Screenshots
 
@@ -198,6 +199,30 @@ file `config/nova-tinymce-editor.php`:
 
 Please be sure that `image` plugin and toolbar button are enabled in your config file.
 
+## Protect code
+
+You can to control what contents [should be protected](https://www.tiny.cloud/docs/tinymce/6/content-filtering/#protect)
+from editing while it gets passed
+into the editor. This is useful for example when you want to protect PHP code from been formatted.
+
+To do this, you must publish the configuration file and add the following line:
+
+```php
+<?php
+
+return [
+'init' => [
+        // ... Your awesome init config ...
+         /**
+         * Set what content should be protected while editing
+         * This should be a regular expression
+         * E.g "/<\?php.*?\?>/g" - Protect PHP code from been formatted
+         */
+         'protect' => []
+];
+//...
+```
+
 ## Upgrade from 1.0.x to 1.1.x
 
 The transition to 1.1 involves the use of a new configuration layout compatible with the previous version.

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -1,79 +1,91 @@
 <template>
-    <DefaultField :errors="errors" :field="currentField" :full-width-content="fullWidthContent"
-                  :show-help-text="showHelpText">
-        <template #field>
-            <editor
-                :id="currentField.attribute"
-                v-model="value"
-                :api-key="currentField.options.apiKey"
-                :cloud-channel="currentField.options.cloudChannel ?? 6"
-                :disabled="currentField.readonly"
-                :init="currentField.options.init"
-                :placeholder="currentField.name"
-                :plugins="currentField.options.plugins"
-                :toolbar="currentField.options.toolbar"
+  <DefaultField :errors="errors" :field="currentField" :full-width-content="fullWidthContent"
+                :show-help-text="showHelpText">
+    <template #field>
+      <editor
+          :id="currentField.attribute"
+          v-model="value"
+          :api-key="currentField.options.apiKey"
+          :cloud-channel="currentField.options.cloudChannel ?? 6"
+          :disabled="currentField.readonly"
+          :init="currentField.options.init"
+          :placeholder="currentField.name"
+          :plugins="currentField.options.plugins"
+          :toolbar="currentField.options.toolbar"
+      />
 
-            />
-
-        </template>
-    </DefaultField>
+    </template>
+  </DefaultField>
 </template>
 
 <script>
-import {DependentFormField, HandlesValidationErrors} from 'laravel-nova'
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
 import Editor from '@tinymce/tinymce-vue'
 
 export default {
-    mixins: [DependentFormField, HandlesValidationErrors],
+  mixins: [DependentFormField, HandlesValidationErrors],
 
-    props: ['resourceName', 'resourceId', 'options'],
+  props: ['resourceName', 'resourceId', 'options'],
 
-    components: {
-        editor: Editor
-    },
+  components: {
+    editor: Editor
+  },
 
-    created() {
-        this.setEditorTheme()
+  created () {
+    this.setupProtectContent()
+    this.setEditorTheme()
+  },
+
+  methods: {
+    setupProtectContent () {
+      if (this.field.options.init.protect) {
+        this.field.options.init.protect = this.field.options.init.protect.map((regex) => {
+          const exp = regex.match(/^([/~@;%#'])(.*?)\1([gimsuy]*)$/)
+          if (exp) {
+            return new RegExp(exp[2], exp[3])
+          }
+          return new RegExp(regex.replace(/^\/+|\/+$/gm, '')) // remove leading and trailing slashes
+        })
+      }
     },
 
-    methods: {
-        setEditorTheme() {
-            const selectedNovaTheme = localStorage.novaTheme
+    setEditorTheme () {
+      const selectedNovaTheme = localStorage.novaTheme
 
-            if (typeof selectedNovaTheme !== 'undefined') {
-                if (selectedNovaTheme === 'system') {
-                    this.setSystemMode()
-                } else if (selectedNovaTheme === 'dark') {
-                    this.field.options.init.skin = 'oxide-dark'
-                    this.field.options.init.content_css = 'dark'
-                } else {
-                    this.field.options.init.skin = 'oxide'
-                    this.field.options.init.content_css = 'default'
-                }
-            } else {
-                this.setSystemMode()
-            }
-        },
+      if (typeof selectedNovaTheme !== 'undefined') {
+        if (selectedNovaTheme === 'system') {
+          this.setSystemMode()
+        } else if (selectedNovaTheme === 'dark') {
+          this.field.options.init.skin = 'oxide-dark'
+          this.field.options.init.content_css = 'dark'
+        } else {
+          this.field.options.init.skin = 'oxide'
+          this.field.options.init.content_css = 'default'
+        }
+      } else {
+        this.setSystemMode()
+      }
+    },
 
-        setSystemMode() {
-            this.field.options.init.skin =
-                window.matchMedia('(prefers-color-scheme: dark)').matches ||
-                document.querySelector('html').classList.contains('dark')
-                    ? 'oxide-dark'
-                    : 'oxide'
-            this.field.options.init.content_css =
-                window.matchMedia('(prefers-color-scheme: dark)').matches ||
-                document.querySelector('html').classList.contains('dark')
-                    ? 'dark'
-                    : 'default'
-        },
+    setSystemMode () {
+      this.field.options.init.skin =
+          window.matchMedia('(prefers-color-scheme: dark)').matches ||
+          document.querySelector('html').classList.contains('dark')
+            ? 'oxide-dark'
+            : 'oxide'
+      this.field.options.init.content_css =
+          window.matchMedia('(prefers-color-scheme: dark)').matches ||
+          document.querySelector('html').classList.contains('dark')
+            ? 'dark'
+            : 'default'
+    },
 
-        /**
-         * Fill the given FormData object with the field's internal value.
-         */
-        fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
-        }
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill (formData) {
+      formData.append(this.field.attribute, this.value || '')
     }
+  }
 }
 </script>