Merge pull request #7 from tiavina-mika/develop

Develop
tiavina-mika · Apr 29, 2024 · 7f6fdd1 · 7f6fdd1
2 parents 72628e8 + 63cd18a
commit 7f6fdd1
Show file tree

Hide file tree

Showing 91 changed files with 9,427 additions and 698 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,5 +23,3 @@ dist-ssr
 *.sln
 *.sw?
 
-.env.preprod
-.env.prod
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
@@ -7,42 +7,14 @@ module.exports = {
   quoteProps: 'preserve',
   bracketSameLine: false,
   endOfLine: "lf",
-  importOrder: [
-    '^react$',
-    '',
-    '<THIRD_PARTY_MODULES>',
-    '',
-    '^@/actions/(.*)$',
-    '^@/components/(.*)$',
-    '^@/config/(.*)$',
-    '^@/containers/(.*)$',
-    '^@/hooks/(.*)$',
-    '^@/pages/(.*)$',
-    '^@/providers/(.*)$',
-    '^@/routes /(.*)$',
-    '^@/validations/(.*)$',
-    '^@/utils/(.*)$',
-    '',
-    '^@/types/(.*)$',
-    '^@/assets/(.*)$',
-    '',
-    '^[./]',
-    '',
-  ],
   importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
   plugins: [
-    '@ianvs/prettier-plugin-sort-imports',
+    '"plugins": ["prettier-plugin-organize-imports"]',
   ],
   printWidth: 80,
   semi: true,
   singleQuote: true,
   tabWidth: 2,
   trailingComma: 'all',
   useTabs: false,
-  importOrderSeparation: true,
-  importOrderCaseInsensitive: true,
-  importOrderGroupNamespaceSpecifiers: true,
-  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
 };
diff --git a/README.md b/README.md
@@ -1,33 +1,199 @@
-# React + TypeScript + Vite
+# mui-tiptap-editor!
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<p  align="center">
 
-Currently, two official plugins are available:
+<b>mui-tiptap-editor</b>: A customizable and easy to use <a href="https://tiptap.dev/">Tiptap</a> styled WYSIWYG rich text editor, using <a  href="https://mui.com/material-ui/getting-started/overview/">Material UI</a>.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+</p>
 
-## Expanding the ESLint configuration
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+# Files
 
-- Configure the top-level `parserOptions` property like this:
+StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible **offline!**
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
+## Table of Contents
+
+<details>
+
+- [Demo](#demo)
+
+- [Installation](#installation)
+
+- [Get started](#get-started)
+
+- [Use the all-in-one component](#use-the-all-in-one-component)
+
+- [Create and provide the `editor` yourself](#create-and-provide-the-editor-yourself)
+
+- [Render read-only rich text content](#render-read-only-rich-text-content)
+
+- [mui-tiptap extensions and components](#mui-tiptap-extensions-and-components)
+
+- [Tiptap extensions](#tiptap-extensions)
+
+- [`HeadingWithAnchor`](#headingwithanchor)
+
+- [`FontSize`](#fontsize)
+
+- [`LinkBubbleMenuHandler`](#linkbubblemenuhandler)
+
+- [`ResizableImage`](#resizableimage)
+
+- [`TableImproved`](#tableimproved)
+
+- [Components](#components)
+
+- [Controls components](#controls-components)
+
+- [Localization](#localization)
+
+- [Tips and suggestions](#tips-and-suggestions)
+
+- [Choosing your editor `extensions`](#choosing-your-editor-extensions)
+
+- [Extension precedence and ordering](#extension-precedence-and-ordering)
+
+- [Other extension tips](#other-extension-tips)
+
+- [Drag-and-drop and paste for images](#drag-and-drop-and-paste-for-images)
+
+- [Re-rendering `RichTextEditor` when `content` changes](#re-rendering-richtexteditor-when-content-changes)
+
+- [Contributing](#contributing)
+</details>
+
+## Installation
+
+```shell
+
+npm  install  mui-tiptap-editor
+
+```
+or
+```shell
+
+yarn  add  mui-tiptap-editor
+
+```
+
+## Get started
+
+#### Simple usage
+
+```tsx
+import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
+import { useState } from "react";
+
+function App() {
+  const [value, setValue] = useState<string>("");
+
+  const handleChange = (newValue: string) => setValue(newValue);
+
+  return (
+    <div>
+      <TextEditor value={value} onChange={handleChange} />
+      {value && <TextEditorReadOnly value={value} />}
+    </div>
+  );
 }
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+See [`example/App.tsx`](..example/App.tsx) for a more thorough example of using `TextEditor`.
+
+## Customization
+
+### Toolbar
+<p> Can display the menus as needed</p>
+
+```tsx
+  import { TextEditor } from 'mui-tiptap-editor';
+
+  function App() {
+    return (
+      <TextEditor toolbar={['bold', 'italic', 'underline']} />
+    );
+  }
+```
+
+### Styles
+#### Root styles
+
+```tsx
+import './index.css';
+
+function App () {
+  return (
+    <TextEditor
+      value="<p>Hello word!</p>"
+      rootClassName="root"
+    />
+  )
+}
+```
+
+```css
+/* ./index.css */
+.root {
+  background-color: #fff;
+}
+.root  .MuiTab-root.Mui-selected {
+  background-color: yellow  !important;
+}
+```
+
+#### Each element styles
+
+```tsx
+import './index.css';
+
+function App () {
+  return (
+    <TextEditor
+      value="<p>Hello word!</p>"
+      label="Content"
+      tabClassName="my-tab"
+      labelClassName="my-label"
+      inputClassName="my-input"
+    />
+  )
+}
+```
+
+```css
+/* ./index.css */
+.my-tab.MuiTab-root.Mui-selected {
+  background-color: pink !important;
+}
+
+.my-label {
+  color: blue !important;
+}
+
+.my-input {
+  border: 1px solid green;
+}
+```
+
+
+## Props
 
-### issues
-https://stackoverflow.com/questions/63190725/delete-cr-only-for-ts-tsx-files-prettier-eslint-on-vscode-1-46
+|props |type                          | Default value                         | Description |
+|----------------|-------------------------------|-----------------------------|-----------------------------|
+|toolbar|`string[]`| heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention, ai| The list of the menu buttons to be displayed|
+|placeholder|`string`|empty|input placeholder
+|label|`string`|empty|input label
+|error|`string`|empty| Error message to display 
+|withFloatingMenu|`boolean`|false| Show or hide the [floating menu](https://tiptap.dev/docs/editor/api/extensions/floating-menu)
+|withBubbleMenu|`boolean`|true| Show or hide the [bubble menu](https://tiptap.dev/docs/editor/api/extensions/bubble-menu)
+|inputClassName|`string`|empty| Override input styles 
+|toolbarClassName|`string`|empty|  Override the toolbar menu styles
+|tabsClassName|`string`|empty| Override the tabs (`preview`, `editor`) styles
+|tabClassName|`string`|empty| Override the tab (`preview` or `editor`) styles
+|errorClassName|`string`|empty| Override the error message styles
+|rootClassName|`string`|empty| Override the main container styles
+|labelClassName|`string`|empty| Override the label styles
+|bubbleMenuToolbar|`string[]`|`['bold', 'italic', 'underline', 'link']`| Similar to `toolbar` props
+|floatingMenuToolbar|`string[]`|`['bold', 'italic', 'underline', 'link']`| Similar to `toolbar` props
+|value|`string`|empty| Value of the input
+|onChange|`(value: string) => void`|empty| Function to call when the input change
+|...all tiptap features|[EditorOptions](https://github.com/ueberdosis/tiptap/blob/e73073c02069393d858ca7d8c44b56a651417080/packages/core/src/types.ts#L52)|empty| Can access to all tiptap `useEditor` props
diff --git a/example/.eslintignore b/example/.eslintignore
@@ -0,0 +1,8 @@
+node_modules
+.eslintrc.cjs
+.prettier.js
+config.overrides.js
+types
+build
+vite.config.ts
+# .eslintrc
diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs
@@ -0,0 +1,71 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'airbnb',
+    'airbnb/hooks',
+    'airbnb-typescript',
+    'plugin:eslint-comments/recommended',
+    'plugin:prettier/recommended',
+  ],
+  ignorePatterns: ['dist', 'node_modules/', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh', 'prefer-arrow-functions'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: "./tsconfig.json",
+    sourceType: "module"
+  },
+  rules: {
+    'prettier/prettier': ['off', { singleQuote: true }],
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "import/no-extraneous-dependencies": "off",
+    'import/extensions': "off",
+    "no-await-in-loop": "off",
+    "import/no-cycle": "off",
+    "@typescript-eslint/no-throw-literal": "off",
+    "import/extensions": "off",
+    "no-plusplus": "off",
+    "no-param-reassign": "off",
+    "prefer-template": "off",
+    '@typescript-eslint/no-explicit-any': 0,
+    'react/react-in-jsx-scope': 'off',
+    'no-console': 'off',
+    'import/prefer-default-export': 'off',
+    'global-require': 'off',
+    '@typescript-eslint/no-shadow': 'off',
+    'react/require-default-props': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
+    'react/no-unescaped-entities': 'off',
+    'jsx-a11y/control-has-associated-label': 'off',
+    'react/function-component-definition': 'off',
+    'react/prop-types': 'off',
+    'eslint-comments/no-unused-disable': 'warn',
+    'max-len': 'off',
+    "consistent-return": "off",
+    "react/no-array-index-key": "off",
+    "no-restricted-syntax" : "off",
+    // -- see: https://github.com/prettier/eslint-plugin-prettier -- //
+    "arrow-body-style": "off",
+    "prefer-arrow-callback": "off",
+    // ------------------------------------------------------------- //
+    'prefer-arrow-functions/prefer-arrow-functions': [
+      'warn',
+      {
+        'allowNamedFunctions': false,
+        'classPropertiesAllowed': false,
+        'disallowPrototype': false,
+        'returnStyle': 'unchanged',
+        'singleReturnOnly': false,
+      },
+    ],
+  }
+}
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env.preprod
+.env.prod
diff --git a/example/.prettierignore b/example/.prettierignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.next
+build