@huongda-group/lexical-file-manager NPM

Power by Hương Đá Group 🇻🇳

File manager for Lexical (React) editor

This package provides a set of components and hooks for Lexical that allow for manage files (like Wordpress media) in React applications. Pull requests are welcome.

See full example. Demo

Hương Đá Group Lexical file manager

Features

List files.
Upload file.
Delete file.
Loading status.
View file text.
Multiple language.
View file audio.
View file image
View file video
Folder manager

Getting started

Install lexical and @lexical/react:

npm install --save lexical @lexical/react

Install @huongda-group/lexical-file-manager:

npm install --save @huongda-group/lexical-file-manager

Add Node & Plugin to config:

import { FileManagerPlugin, FileManagerNode } from '@huongda-group/lexical-file-manager';

const editorConfig = {
  namespace: 'React.js Demo',
  nodes: [FileManagerNode], // Add node
  onError(error: Error) {
    throw error;
  },
  theme: ExampleTheme
};

<LexicalComposer initialConfig={editorConfig}>
  <div className="editor-container">
    <ToolbarPlugin />
    <div className="editor-inner">
      <RichTextPlugin
        contentEditable={
          <ContentEditable
            className="editor-input"
            aria-placeholder={placeholder}
          />
        }
        placeholder={
          <div className="editor-placeholder">{placeholder}</div>
        }
        ErrorBoundary={LexicalErrorBoundary}
      />
      <HistoryPlugin />
      <AutoFocusPlugin />
      <TreeViewPlugin />
      <FileManagerPlugin /> {/*Add plugin here*/}
    </div>
  </div>
</LexicalComposer>

Add Button to Toolbar:

import { FileManager } from '@huongda-group/lexical-file-manager';

<FileManager
  title="Multiple Files Manager"
  editor={editor}
  files={[
    {
      id: '1',
      name: 'Image 1',
      url: 'https://placehold.co/600x400/orange/white',
      size: 1024,
      mimetype: 'image/jpeg',
    },
    {
      id: '2',
      name: 'Audio 1',
      url: 'https://www.kozco.com/tech/LRMonoPhase4.mp3',
      size: 1024,
      mimetype: 'audio/mpeg',
    },
    {
      id: '3',
      name: 'Video 1',
      url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      size: 1024,
      mimetype: 'video/mp4',
    },
    {
      id: '4',
      name: 'File 1',
      url: 'https://example-files.online-convert.com/document/txt/example.txt',
      size: 1024,
      mimetype: 'text/plain'
    },
  ].map((item, index) => ({ ...item, index }))}
  aria-label="File Manager Multiple"
>
  <button className="toolbar-item" aria-label="File Manager">
    Upload
  </button>
</FileManager>

Props

Name	Required	Type	Default value	Description
editor	`true`	LexicalEditor	-	Editor from useLexicalComposerContext()
files	`true`	FileItem	[]	List of files to add
onUpload	`true`	{multiple: boolean; onUpload: (f: FileItem/FileItem[]) => void}	-	callback when upload
onClose	`false`	() => void - optional	-	callback when close modal
onInsert	`false`	(f: FileItem/FileItem[]) => void - optional	-	callback when insert file/files
onDelete	`false`	(f: FileItem) => void - optional	-	callback when delete file
multiple	`false`	boolean - optional	false	config upload simple or multiple files
title	`false`	string - optional	-	title of modal

FileItem interface

Name	Required	Type	Default value	Description
id	`true`	string	-	Identify each file
name	`true`	string	-	Name
url	`true`	string	-	Url of file
size	`true`	number	-	Size of file in bytes
mimetype	`true`	Mimetype	-	Mimetype of file
index	`true`	number	-	Order of file
key	`false`	NodeKey	-	NodeKey of lexical

Mimetype type

Mimetype includes file types such as:

Image
- image/jpeg
- image/png
- image/gif
- image/bmp
- image/webp
- image/tiff
- image/svg+xml
Audio
- audio/mpeg
- audio/wav
- audio/ogg
- audio/mp4
- audio/aac
- audio/flac
- audio/amr
- audio/x-ms-wma
Video
- video/mp4
- video/webm
- video/x-msvideo
- video/quicktime
- video/x-ms-wav
- video/x-flv
- video/x-matroska
- video/mpeg
Other file
- string ...

License

This project is licensed under the MIT License - see the LICENSE

@emotion/react @emotion/styled @lexical/react @lexical/utils bootstrap lexical react react-bootstrap react-bootstrap-icons tslib

0.0.2

8 months ago

0.0.1

9 months ago