Skip to content

Commit

Permalink
Update readme file (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiggesT
DiggesT authored May 25, 2023
1 parent b9e205d commit 645b9dd
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 42 deletions.
125 changes: 88 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,35 +83,37 @@ Coming soon... -->

`<EditorComposer />`

| Property | Type | | description |
| ------------------ | ----------------- | -------- | ---------------------------------------------------------------------------------- |
| children | `ReactNode` | required | Nested child component which is the Editor itself |
| initialEditorState | `InitialEditorStateType` | optional | The initial state of the editor |
| Property | Type | | description |
| ------------------ | ------------------------ | -------- | ------------------------------------------------- |
| children | `ReactNode` | required | Nested child component which is the Editor itself |
| initialEditorState | `InitialEditorStateType` | optional | The initial state of the editor |

<br />

`<Editor />`

| Property | Type | | description |
| ------------------ | ----------------- | -------- | ---------------------------------------------------------------------------------- |
| children | `ReactNode` | optional | Nested child components, like the `ToolbarPlugin` |
| hashtagsEnabled | `boolean` | optional | Enables the automatic hashtag highlighting, default is `false` |
| autoLinkEnabled | `boolean` | optional | Enables the automatic link highlighting, default is `false` |
| emojisEnabled | `boolean` | optional | Replaces the emoji combiniations with its corresponding symbol, default is `false` |
| actionsEnabled | `boolean` | optional | Enables the actions toolbar, default is `false` |
| placeholder | `string` | optional | The default content of the editor when it is first loaded |
| listMaxIndent | `number` | optional | The maximum indent capacity of any listed element, the default is `7` |
| isEditable | `boolean` | optional | Enables read-only mode for the editor, default is `false` |
| initialEditorState | `string` | optional | JSON string to initialize the initial content of the editor. |
| onChange | `(editorState: string, editorInstance?: LexicalEditor) => void` | optional | Accessing the current editor state and the active editor instance |
| locale | `en | fr | null` | optional | Enables localization in the language of your choice, default is `en`. Available languages are `en` and `fr` |
| Property | Type | | description |
| ------------------ | --------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
| children | `ReactNode` | optional | Nested child components, like the `ToolbarPlugin` |
| hashtagsEnabled | `boolean` | optional | Enables the automatic hashtag highlighting, default is `false` |
| autoLinkEnabled | `boolean` | optional | Enables the automatic link highlighting, default is `false` |
| emojisEnabled | `boolean` | optional | Replaces the emoji combiniations with its corresponding symbol, default is `false` |
| actionsEnabled | `boolean` | optional | Enables the actions toolbar, default is `false` |
| placeholder | `string` | optional | The default content of the editor when it is first loaded |
| listMaxIndent | `number` | optional | The maximum indent capacity of any listed element, the default is `7` |
| isEditable | `boolean` | optional | Enables read-only mode for the editor, default is `false` |
| initialEditorState | `string` | optional | JSON string to initialize the initial content of the editor. |
| onChange | `(editorState: string, editorInstance?: LexicalEditor) => void` | optional | Accessing the current editor state and the active editor instance |
| locale | `'en', 'fr', 'ptBr', 'ru', null;` | optional | Enables localization in the language of your choice, default is `en`. Available languages are `en`, `fr`, `ptBr` and `ru` |

## Automatic browser language detection Support

Verbum supports automatic browser language detection by default if locale not provided. If the browser language is set to `fr`, the editor will be automatically localized in French. If the browser language is set to `en`, the editor will be automatically localized in English. If the browser language is set to any other language, the editor will be automatically localized in English.

<br />

## Plugins

`<ToolbarPlugin />`

| Property | Type | | description |
Expand All @@ -124,29 +126,78 @@ Verbum supports automatic browser language detection by default if locale not pr

<br />

<!-- enableTable?: boolean;
enableYoutube?: boolean;
enableTwitter?: boolean;
enablePoll?: boolean;
enableImage?: boolean;
enableEquations?: boolean;
enableExcalidraw?: boolean;
enableHorizontalRule?: boolean;
enableStickyNote?: boolean; -->
### Toolbar components

`<FontFamilyDropdown />`

Add your own font families.

| Property | Type | | description |
| ----------- | ---------------------------------- | -------- | ------------- |
| fontOptions | `FontOptions = [string, string][]` | optional | List of fonts |

`<FontSizeDropdown />`

Add your own font sizes.

| Property | Type | | description |
| --------------- | ---------------------------------- | -------- | ------------------ |
| fontSizeOptions | `FontOptions = [string, string][]` | optional | List of font sizes |

<br />

`<InsertDropdown />`

| Property | Type | | description |
| -------------------- | --------- | -------- | ------------------------------------------------ |
| enableTable | `boolean` | optional | Enables table inserting feature |
| enableYoutube | `boolean` | optional | Enables youtube video inserting feature |
| enableTwitter | `boolean` | optional | Enables tweet inserting feature |
| enablePoll | `boolean` | optional | Enables poll inserting feature |
| enableImage | `boolean` | optional | Enables image inserting feature |
| enableEquations | `boolean` | optional | Enables equation inserting feature |
| enableExcalidraw | `boolean` | optional | Enables diagram inserting feature |
| enableHorizontalRule | `boolean` | optional | Enables the horizontal rule inserting for layout |
| enableStickyNote | `boolean` | optional | Enables stick note inserting for layout |
| Property | Type | | description |
| -------------------- | ---------------------------------------- | -------- | ------------------------------------------------ |
| enableTable | `boolean` | optional | Enables table inserting feature |
| enableYoutube | `boolean` | optional | Enables youtube video inserting feature |
| enableTwitter | `boolean` | optional | Enables tweet inserting feature |
| enablePoll | `boolean` | optional | Enables poll inserting feature |
| enableImage | `{ enable: boolean; maxWidth: number };` | optional | Enables image inserting feature, set max width |
| enableEquations | `boolean` | optional | Enables equation inserting feature |
| enableExcalidraw | `boolean` | optional | Enables diagram inserting feature |
| enableHorizontalRule | `boolean` | optional | Enables the horizontal rule inserting for layout |
| enableStickyNote | `boolean` | optional | Enables stick note inserting for layout |

<br />

`<MentionsPlugin />`

| Property | Type | | description |
| ------------------ | ----------------------- | -------- | --------------------------------- |
| searchData | `SearchData<A>` | required | Searching data using input string |
| getTypeaheadValues | `GetTypeaheadValues<A>` | required | Search data transormation |

### Plugins support

| Plugin name | Working | Description | Source |
| -------------------------- | ------------------ | ---------------------------------------------- | -------------------------- |
| ActionsPlugin | :white_check_mark: | Action menu in the right bottom corner | Editor.tsx |
| AutoLinkPlugin | :white_check_mark: | Auto highlight links | Editor.tsx |
| CharacterStylesPopupPlugin | :white_check_mark: | Modal style editor for selected text | Independent |
| ClickableLinkPlugin | :white_check_mark: | Enable to open links in new tab | Independent |
| CodeHighlightPlugin | :white_check_mark: | Code Block with different languages | Independent |
| CommentPlugin | :x: | | CharacterStylesPopupPlugin |
| EmojisPlugin | :white_check_mark: | A few emojis | Editor.tsx |
| EquationsPlugin | :scissors: | Katex, It's too heavy (cut out) | InsertDropdown.tsx |
| ExcalidrawPlugin | :scissors: | Excalidraw (cut out) | InsertDropdown.tsx |
| HorizontalRulePlugin | :white_check_mark: | Horizontal divider | InsertDropdown.tsx |
| ImagesPlugin | :x: | Insert file only (no URLs) | InsertDropdown.tsx |
| KeywordsPlugin | :x: | | Independent |
| ListMaxIndentLevelPlugin | :white_check_mark: | Max Indent Level (bullet, numeric) | Independent |
| MarkdownShortcutPlugin | :white_check_mark: | Convert into Markdown format | ActionsPlugin |
| MentionsPlugin | :white_check_mark: | Mentions, starts with `@` | Independent |
| PollPlugin | :x: | Poll, need test with many votes | InsertDropdown.tsx |
| SpeechToTextPlugin | :white_check_mark: | Voice recognition to text | ActionsPlugin |
| StickyPlugin | :x: | Yellow sticker, there is a bug with text style | InsertDropdown.tsx |
| TabFocusPlugin | | | |
| TableActionMenuPlugin | :white_check_mark: | Create table | InsertDropdown.tsx |
| TestRecorderPlugin | | | |
| TreeViewPlugin | | | |
| TwitterPlugin | :white_check_mark: | Insert twits | InsertDropdown.tsx |
| TypingPerfPlugin | | | |
| YouTubePlugin | :white_check_mark: | Insert YouTube videos | InsertDropdown.tsx |

## Development

Expand Down
12 changes: 7 additions & 5 deletions src/plugins/MentionsPlugin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ import './MentionsPlugin.css';

type SearchData<A> = (p: string) => Promise<A[]>;

type GetTypeaheadValues<A> = (result: A) => {
url: string;
value: string;
picture: JSX.Element;
};

const PUNCTUATION =
'\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
Expand Down Expand Up @@ -221,11 +227,7 @@ function MentionsTypeaheadMenuItem({

export default function MentionsPlugin<A>(props: {
searchData: SearchData<A>;
getTypeaheadValues: (result: A) => {
url: string;
value: string;
picture: JSX.Element;
};
getTypeaheadValues: GetTypeaheadValues<A>;
}): JSX.Element | null {
const { searchData, getTypeaheadValues } = props;

Expand Down

0 comments on commit 645b9dd

Please sign in to comment.