📟 Launch

Author: melishev

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = false
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1,103 @@
+# From https://github.com/Danimoth/gitattributes/blob/master/Web.gitattributes
+
+# Handle line endings automatically for files detected as text
+# and leave all files detected as binary untouched.
+* text=auto
+
+#
+# The above will handle all files NOT found below
+#
+
+#
+## These files are text and should be normalized (Convert crlf => lf)
+#
+
+# source code
+*.php text
+*.css text
+*.sass text
+*.scss text
+*.less text
+*.styl text
+*.js text eol=lf
+*.coffee text
+*.json text
+*.htm text
+*.html text
+*.xml text
+*.svg text
+*.txt text
+*.ini text
+*.inc text
+*.pl text
+*.rb text
+*.py text
+*.scm text
+*.sql text
+*.sh text
+*.bat text
+
+# templates
+*.ejs text
+*.hbt text
+*.jade text
+*.haml text
+*.hbs text
+*.dot text
+*.tmpl text
+*.phtml text
+
+# git config
+.gitattributes text
+.gitignore text
+.gitconfig text
+
+# code analysis config
+.jshintrc text
+.jscsrc text
+.jshintignore text
+.csslintrc text
+
+# misc config
+*.yaml text
+*.yml text
+.editorconfig text
+
+# build config
+*.npmignore text
+*.bowerrc text
+
+# Heroku
+Procfile text
+.slugignore text
+
+# Documentation
+*.md text
+LICENSE text
+AUTHORS text
+
+
+#
+## These files are binary and should be left untouched
+#
+
+# (binary is a macro for -text -diff)
+*.png binary
+*.jpg binary
+*.jpeg binary
+*.gif binary
+*.ico binary
+*.mov binary
+*.mp4 binary
+*.mp3 binary
+*.flv binary
+*.fla binary
+*.swf binary
+*.gz binary
+*.zip binary
+*.7z binary
+*.ttf binary
+*.eot binary
+*.woff binary
+*.pyc binary
+*.pdf binary

.gitignore

@@ -0,0 +1,10 @@
+# Don't check auto-generated stuff into git
+coverage
+node_modules
+stats.json
+package-lock.json
+
+# Cruft
+.DS_Store
+npm-debug.log
+.idea

README.md

@@ -0,0 +1,46 @@
+<img src="static/strapi-plugin-editorjs.png">
+<h1 style="width: 100%; text-align: center">strapi-plugins-editorjs</h1>
+
+### 📝 Plugin for Strapi Headless CMS, hiding the standard WYSIWYG editor on Editor.js
+
+## 🍀 Supported Official Plugin
+
+- [x] Paragraph (default)
+- [x] Embed
+- [x] Table
+- [x] List
+- [x] Warning
+- [x] Code
+- [o] Link
+- [o] Image
+- [x] Raw
+- [x] Header
+- [x] Quote
+- [x] Marker
+- [x] CheckList
+- [x] Delimiter
+- [x] InlineCode
+- [o] SimpleImage
+
+## 🤟🏻 Getting Started
+
+### Install via npm (or yarn)
+
+```bash
+yarn add strapi-plugin-editorjs
+# or
+npm install strapi-plugin-editorjs
+```
+
+## 🛠 Need Help
+
+### At the moment, of all the official plugins not working:
+
+1. Image
+2. SimpleImage
+
+#### I need the help of more professional people in Strapi to properly implement these Editor.js plugins in conjunction with Strapi. If you know how you can solve this problem, please let me know, or create a pull request.
+
+## ⭐️ Show your support
+
+Give a star if this project helped you.

admin/src/components/Wysiwyg/index.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { Label, InputDescription, InputErrors } from 'strapi-helper-plugin';
+import Editor from '../editorjs';
+
+const Wysiwyg = ({
+  inputDescription,
+  errors,
+  label,
+  name,
+  noErrorsDescription,
+  onChange,
+  value,
+}) => {
+
+  return (
+    <div
+      style={{
+        marginBottom: '1.6rem',
+        fontSize: '1.3rem',
+        fontFamily: 'Lato',
+      }}
+    >
+      <Label htmlFor={name} message={label} style={{ marginBottom: 10 }} />
+      <Editor name={name} onChange={onChange} value={value} />
+      <InputDescription
+        message={inputDescription}
+        style={!isEmpty(inputDescription) ? { marginTop: '1.4rem' } : {}}
+      />
+      <InputErrors errors={(!noErrorsDescription && errors) || []} name={name} />
+    </div>
+  );
+};
+
+Wysiwyg.defaultProps = {
+  errors: [],
+  inputDescription: null,
+  label: '',
+  noErrorsDescription: false,
+  value: '',
+};
+
+Wysiwyg.propTypes = {
+  errors: PropTypes.array,
+  inputDescription: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.shape({
+      id: PropTypes.string,
+      params: PropTypes.object,
+    }),
+  ]),
+  name: PropTypes.string.isRequired,
+  noErrorsDescription: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+};
+
+export default Wysiwyg;

admin/src/components/editorjs/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import EditorJs from 'react-editor-js';
+
+// Plugins for Editor.js
+import Embed from '@editorjs/embed'
+import Table from '@editorjs/table'
+import Paragraph from '@editorjs/paragraph'
+import List from '@editorjs/list'
+import Warning from '@editorjs/warning'
+import Code from '@editorjs/code'
+// import LinkTool from '@editorjs/link'
+import Image from '@editorjs/image'
+import Raw from '@editorjs/raw'
+import Header from '@editorjs/header'
+import Quote from '@editorjs/quote'
+import Marker from '@editorjs/marker'
+import CheckList from '@editorjs/checklist'
+import Delimiter from '@editorjs/delimiter'
+import InlineCode from '@editorjs/inline-code'
+import SimpleImage from '@editorjs/simple-image'
+
+const editorTools = {
+  embed: Embed,
+  table: Table,
+  paragraph: Paragraph,
+  list: List,
+  warning: Warning,
+  code: Code,
+  // linkTool: LinkTool,
+  image: Image,
+  raw: Raw,
+  header: Header,
+  quote: Quote,
+  marker: Marker,
+  checklist: CheckList,
+  delimiter: Delimiter,
+  inlineCode: InlineCode,
+  simpleImage: SimpleImage
+}
+
+const Editor = ({ onChange, name, value }) => {
+
+  return (
+    <EditorJs
+      data={value}
+      onReady={(api) => value ? api.blocks.render(JSON.parse(value)) : ''}
+      onChange={(api, newData) => {
+        onChange({ target: { name, value: JSON.stringify(newData) } })}
+      }
+      tools={editorTools}
+    />
+  );
+};
+
+Editor.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+};
+
+export default Editor;

admin/src/containers/App/index.js

@@ -0,0 +1,27 @@
+/**
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React from 'react';
+import { Switch, Route } from 'react-router-dom';
+import { NotFound } from 'strapi-helper-plugin';
+// Utils
+import pluginId from '../../pluginId';
+// Containers
+import HomePage from '../HomePage';
+
+const App = () => {
+  return (
+    <div>
+      <Switch>
+        <Route path={`/plugins/${pluginId}`} component={HomePage} exact />
+        <Route component={NotFound} />
+      </Switch>
+    </div>
+  );
+};
+
+export default App;

admin/src/containers/HomePage/index.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * HomePage
+ *
+ */
+
+import React, { memo } from 'react';
+// import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const HomePage = () => {
+  return (
+    <div>
+      <h1>{pluginId}&apos;s HomePage</h1>
+      <p>Happy coding</p>
+    </div>
+  );
+};
+
+export default memo(HomePage);

admin/src/containers/Initializer/index.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * Initializer
+ *
+ */
+
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import pluginId from '../../pluginId';
+
+const Initializer = ({ updatePlugin }) => {
+  const ref = useRef();
+  ref.current = updatePlugin;
+
+  useEffect(() => {
+    ref.current(pluginId, 'isReady', true);
+  }, []);
+
+  return null;
+};
+
+Initializer.propTypes = {
+  updatePlugin: PropTypes.func.isRequired,
+};
+
+export default Initializer;