diff --git a/package-lock.json b/package-lock.json index 61dde74..044859d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,8 @@ "": { "dependencies": { "flowbite": "^2.3.0", - "sweetalert2": "^11.12.0" + "sweetalert2": "^11.12.0", + "vue-froala-wysiwyg": "^4.2.1" }, "devDependencies": { "@inertiajs/vue3": "^1.0.14", @@ -38,7 +39,6 @@ "version": "7.24.7", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz", "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -46,6 +46,19 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime-corejs2": { + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.24.8.tgz", + "integrity": "sha512-vGYjT6h/MNSJ74UXgcgmoRNrMiSwMCgSy/HXMM0jTQJ811YfpBxvxidMPRdJnTaUjDpqwWI2XC6bkz0vnWpjfQ==", + "license": "MIT", + "dependencies": { + "core-js": "^2.6.12", + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -492,8 +505,7 @@ "node_modules/@jridgewell/sourcemap-codec": { "version": "1.4.15", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", - "dev": true + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", @@ -817,7 +829,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.29.tgz", "integrity": "sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==", - "dev": true, "dependencies": { "@babel/parser": "^7.24.7", "@vue/shared": "3.4.29", @@ -830,7 +841,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.29.tgz", "integrity": "sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==", - "dev": true, "dependencies": { "@vue/compiler-core": "3.4.29", "@vue/shared": "3.4.29" @@ -840,7 +850,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.29.tgz", "integrity": "sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==", - "dev": true, "dependencies": { "@babel/parser": "^7.24.7", "@vue/compiler-core": "3.4.29", @@ -857,7 +866,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.29.tgz", "integrity": "sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==", - "dev": true, "dependencies": { "@vue/compiler-dom": "3.4.29", "@vue/shared": "3.4.29" @@ -867,7 +875,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.29.tgz", "integrity": "sha512-w8+KV+mb1a8ornnGQitnMdLfE0kXmteaxLdccm2XwdFxXst4q/Z7SEboCV5SqJNpZbKFeaRBBJBhW24aJyGINg==", - "dev": true, "dependencies": { "@vue/shared": "3.4.29" } @@ -876,7 +883,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.29.tgz", "integrity": "sha512-s8fmX3YVR/Rk5ig0ic0NuzTNjK2M7iLuVSZyMmCzN/+Mjuqqif1JasCtEtmtoJWF32pAtUjyuT2ljNKNLeOmnQ==", - "dev": true, "dependencies": { "@vue/reactivity": "3.4.29", "@vue/shared": "3.4.29" @@ -886,7 +892,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.29.tgz", "integrity": "sha512-gI10atCrtOLf/2MPPMM+dpz3NGulo9ZZR9d1dWo4fYvm+xkfvRrw1ZmJ7mkWtiJVXSsdmPbcK1p5dZzOCKDN0g==", - "dev": true, "dependencies": { "@vue/reactivity": "3.4.29", "@vue/runtime-core": "3.4.29", @@ -898,7 +903,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.29.tgz", "integrity": "sha512-HMLCmPI2j/k8PVkSBysrA2RxcxC5DgBiCdj7n7H2QtR8bQQPqKAe8qoaxLcInzouBmzwJ+J0x20ygN/B5mYBng==", - "dev": true, "dependencies": { "@vue/compiler-ssr": "3.4.29", "@vue/shared": "3.4.29" @@ -910,8 +914,7 @@ "node_modules/@vue/shared": { "version": "3.4.29", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.29.tgz", - "integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==", - "dev": true + "integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==" }, "node_modules/ansi-regex": { "version": "6.0.1", @@ -1016,6 +1019,22 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/babel-runtime": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", + "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==", + "license": "MIT", + "dependencies": { + "core-js": "^2.4.0", + "regenerator-runtime": "^0.11.0" + } + }, + "node_modules/babel-runtime/node_modules/regenerator-runtime": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "license": "MIT" + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1210,6 +1229,14 @@ "node": ">= 6" } }, + "node_modules/core-js": { + "version": "2.6.12", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz", + "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==", + "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.", + "hasInstallScript": true, + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -1239,8 +1266,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/deepmerge": { "version": "4.3.1", @@ -1311,7 +1337,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "engines": { "node": ">=0.12" }, @@ -1390,8 +1415,7 @@ "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", - "dev": true + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, "node_modules/fast-glob": { "version": "3.3.2", @@ -1514,6 +1538,12 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/froala-editor": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/froala-editor/-/froala-editor-4.2.1.tgz", + "integrity": "sha512-Ov8XdJpP6X+hernpF89CzkDHBiXEsBzFUX2ftmG2QLw+2ZqiK2RirUbUy2IABxBXZrBzHgzm8GZyZ5rd+cAU5Q==", + "license": "https://www.froala.com/wysiwyg-editor/pricing" + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -1824,7 +1854,6 @@ "version": "0.30.10", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", - "dev": true, "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" } @@ -1919,7 +1948,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -2030,8 +2058,7 @@ "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -2067,7 +2094,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -2287,6 +2313,12 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -2444,7 +2476,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2782,7 +2813,6 @@ "version": "3.4.29", "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz", "integrity": "sha512-8QUYfRcYzNlYuzKPfge1UWC6nF9ym0lx7mpGVPJYNhddxEf3DD0+kU07NTL0sXuiT2HuJuKr/iEO8WvXvT0RSQ==", - "dev": true, "dependencies": { "@vue/compiler-dom": "3.4.29", "@vue/compiler-sfc": "3.4.29", @@ -2799,6 +2829,21 @@ } } }, + "node_modules/vue-froala-wysiwyg": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/vue-froala-wysiwyg/-/vue-froala-wysiwyg-4.2.1.tgz", + "integrity": "sha512-x9LXEJcjmm/jwJN6woRfByqxnhHT6DfZBdiCwao3GyLUTj+CzghNV/lyov3XNQQb/Pm0dbx3/7fqaJbDktajCw==", + "license": "https://froala.com/wysiwyg-editor/terms/", + "dependencies": { + "@babel/runtime-corejs2": "^7.7.7", + "babel-runtime": "^6.26.0", + "froala-editor": "^4.2.1", + "vue": "^3.2.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index e0884f1..d2b6334 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ }, "dependencies": { "flowbite": "^2.3.0", - "sweetalert2": "^11.12.0" + "sweetalert2": "^11.12.0", + "vue-froala-wysiwyg": "^4.2.1" } } diff --git a/resources/js/Pages/Product/Create.vue b/resources/js/Pages/Product/Create.vue index a033243..6d3082f 100644 --- a/resources/js/Pages/Product/Create.vue +++ b/resources/js/Pages/Product/Create.vue @@ -29,6 +29,22 @@ const form = useForm({ status: 'active', }); +const froalaConfig = { + pluginsEnabled: [ + 'align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', + 'draggable', 'embedly', 'emoticons', 'entities', + 'fontFamily', 'fontSize', 'fullscreen', 'inlineStyle', + 'inlineClass', 'lineBreaker', 'lineHeight', 'link', + 'lists', 'paragraphFormat', 'paragraphStyle', 'quote', + 'save', 'table', 'url', 'wordPaste', + ], + events: { + initialized: function () { + console.log('initialized') + }, + } +}; + const submit = () => { form.transform(data => ({ ...data, @@ -96,7 +112,7 @@ const submitDraft = () => {
-
+

Product Information

@@ -114,8 +130,8 @@ const submitDraft = () => {
- - + +
diff --git a/resources/js/Pages/Product/Edit.vue b/resources/js/Pages/Product/Edit.vue index 368797a..5d9c9aa 100644 --- a/resources/js/Pages/Product/Edit.vue +++ b/resources/js/Pages/Product/Edit.vue @@ -31,6 +31,22 @@ const form = useForm({ status: page.props.product.status, }); +const froalaConfig = { + pluginsEnabled: [ + 'align', 'charCounter', 'codeBeautifier', 'codeView', 'colors', + 'draggable', 'embedly', 'emoticons', 'entities', + 'fontFamily', 'fontSize', 'fullscreen', 'inlineStyle', + 'inlineClass', 'lineBreaker', 'lineHeight', 'link', + 'lists', 'paragraphFormat', 'paragraphStyle', 'quote', + 'save', 'table', 'url', 'wordPaste', + ], + events: { + initialized: function () { + console.log('initialized') + }, + } +}; + const submit = () => { form.transform(data => ({ ...data, @@ -90,7 +106,7 @@ const submit = () => {
-
+

Product Information

@@ -108,8 +124,8 @@ const submit = () => {
- - + +
diff --git a/resources/js/app.js b/resources/js/app.js index b6f9fb0..0a34ef4 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,10 +1,20 @@ import './bootstrap'; import '../css/app.css'; +//Import Froala Editor +import 'froala-editor/js/plugins.pkgd.min.js'; +//Import third party plugins +import 'froala-editor/js/third_party/embedly.min'; +import 'froala-editor/js/third_party/font_awesome.min'; +import 'froala-editor/js/third_party/spell_checker.min'; +// Import Froala Editor css files. +import 'froala-editor/css/froala_editor.pkgd.min.css'; +import 'froala-editor/css/froala_style.min.css'; import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/vue3'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; import { ZiggyVue } from '../../vendor/tightenco/ziggy'; +import VueFroala from 'vue-froala-wysiwyg'; const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; @@ -15,6 +25,7 @@ createInertiaApp({ return createApp({ render: () => h(App, props) }) .use(plugin) .use(ZiggyVue) + .use(VueFroala) .mount(el); }, progress: {