mui-tiptap-editor - npm Package Compare versions

Comparing version 0.1.35 to 0.1.36

package.json

@@ -26,3 +26,3 @@ {
   },
-  "version": "0.1.35",
+  "version": "0.1.36",
   "license": "MIT",
@@ -29,0 +29,0 @@ "type": "module",

README.md

@@ -1,3 +0,186 @@
-<p align="center">
-  <b>mui-tiptap</b>: A customizable <a href="https://mui.com/material-ui/getting-started/overview/">Material UI</a> styled WYSIWYG rich text editor, using <a href="https://tiptap.dev/">Tiptap</a>.
-</p>
+# Welcome to StackEdit!
+
+<p  align="center">
+
+<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>.
+
+</p>
+
+
+# Files
+
+StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible **offline!**
+
+## 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>
+  );
+}
+```
+
+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
+
+|props |type                          | Default value                         | Values |
+|----------------|-------------------------------|-----------------------------|-----------------------------|
+|toolbar|`string[]`| heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention, ai| heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention, ai|
+
+
+
+

No alert changes

Improved metrics

Total package byte prevSize

139084

increased by2.71%

Number of lines in readme file

187

increased by6133.33%

No dependency changes