storyblok / storyblok-fieldtype Goto Github PK

View Code? Open in Web Editor NEW

12.0 17.0 13.0 694 KB

Tool for creating custom fieldtypes for Storyblok with babel, browserify and hotreload

HTML 31.92% Vue 47.08% JavaScript 21.00%

cms storyblok extentions plugin field-type

storyblok-fieldtype's Introduction

Storyblok Field-Type

A Storyblok Field-Type Plugin Starter Project

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

In the browser, you will see the white screen with the following error in the console:

[Vue warn]: Error in created hook: "SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null//app.storyblok.com' in a call to 'postMessage'."

DOMException: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null//app.storyblok.com' in a call to 'postMessage'.

But don't worry, this project is just a template and only works as part of the storyblok app. See: https://www.storyblok.com/docs/plugins/enable-local-dev-mode

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

https://www.storyblok.com/docs/Guides/Creating-a-field-type-plugin#how-to-develop-plugins-locally

storyblok-fieldtype's People

Contributors

Stargazers

Watchers

Forkers

maoberlehner dominikangerer simonchill saury garysiladi h-arts fernandacanto boughtbymany filipjaj stijnavdl hu0p marbio ellink

storyblok-fieldtype's Issues

Support for node v18

https://www.storyblok.com/docs/plugins/enable-local-dev-mode#how-to-develop-plugins-locally

Following the instructions from the storyblok docs using the latest version of node (v18) results in an error.
Installing with node v16 works.
Tested on OSX 12.4 (intel x86).

10% building 2/2 modules 0 active
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/dkeller/www/storyblok-fieldtype/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
10% building 2/5 modules 3 active /Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/hot/dev-server.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/dkeller/www/storyblok-fieldtype/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/dkeller/www/storyblok-fieldtype/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /Users/dkeller/www/storyblok-fieldtype/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

I played around with the plugin fieldtypes and came across that the devDependencies are little outdated. Especially babel would be great getting updated then further development in cloning this repo would be easier.

Clipboard API in iFrame not allowed / execCommand deprecated though

In the past, it was possible to enable clipboard functionality like copy/paste in field type plugins.

As execCommand seems to be deprecated nowadays, while the navigator.clipboard API would be usable in modern solutions.

As Field Type Plugins run in iframes, this would require the encapsulating iframes to have allowed options set for them to work.

Expected Behavior

Iframes allow the read/write access to the Clipboard API.

<iframe src="index.html" allow="clipboard-read; clipboard-write">
... 
</iframe>

So the following would work.

await navigator.clipboard.writeText('hello my dear copied thing')

(Optimally also in the development Sandbox ofc)

Current Behavior

As the iframe settings encapsulating the field type plugin currently do not allow that, any read or write access to the Clipboard API is blocked.

References

Unable to install dependencies

I get the following output:

WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/package.json'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/.travis.yml'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/index.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/LICENSE'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/README.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/path-parse-b11f7664/test.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/package.json'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/package.json'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/package.json'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/decode.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/decode.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/.npmignore'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/encode.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/encode.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/README.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/index.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/index.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/History.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/index.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/.travis.yml'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/.Readme.md.un~'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/qq.js'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/History.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/.package.json.un~'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/coa-c29f3778/README.ru.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/License.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-es3-ec8e1374/Readme.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/.travis.yml'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/License.md'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/.History.md.un~'
WARN tar ENOENT: no such file or directory, open '/Users/simon/Dropbox/SR_Projects/0113_Jamie-Reid_Website/CODE/storyblok-plugins/storyblok-fieldtype/node_modules/.staging/querystring-92f1994c/Readme.md'
npm WARN storyblok-metatag-plugin@ No repository field.
npm WARN storyblok-metatag-plugin@ No license field.

npm ERR! code E404
npm ERR! 404 Not Found: [email protected]

How to get selected locale in preview mode?

Hey guys,

Is there any way to get value of selected locale in custom field type?