1 | # we-edit
|
2 | a document editing library
|
3 |
|
4 | ## install
|
5 | ```sh
|
6 | npm install we-edit
|
7 | ```
|
8 |
|
9 | ## design : Loader load input file by Stream, convert it to redux store, create representation document based on state in the store to view/edit in browser, or emit to a file format
|
10 | * Loader (Input) -> we-edit models
|
11 | * Viewer/Editor/Emitter -> we-edit document
|
12 | * Represenation(pagination/html/text) -> view document
|
13 | * Emitter.Format -> output document
|
14 | * Stream(load,write) -> file/url/object/...
|
15 |
|
16 | ## concept
|
17 | * state document as store to support multiple view/edit/emit tasks for same state
|
18 | * utilize React to evolve documents for different purpose, and to improve performance
|
19 | * installable plugin to extend system, including Input, Loader, Stream, Emitter Format, Representation
|
20 |
|
21 |
|
22 | ###example
|
23 | ```js
|
24 | //to convert docx to pdf, svg, and html on console
|
25 | import {Loader, Emitter, Stream, render} from "we-edit"
|
26 | import iDocx from "we-edit/input-docx"
|
27 | import lsFile from "we-edit/loader-stream-file"
|
28 | import * from "we-edit/representation-pagination"
|
29 | import * from "we-edit/representation-html"
|
30 |
|
31 | iDocx.install()
|
32 | lsFile.install()
|
33 |
|
34 | render(
|
35 | <Loader type="file" path="./test.docx">
|
36 | <Emitter>
|
37 | <Stream type="file" path="./test" name={({format})=>`test.${format}`}>
|
38 | <Emitter.Format type="pdf"/>
|
39 | <Emitter.Format type="svg"/>
|
40 | <Emitter.Format type="html"/>
|
41 | </Stream>
|
42 | </Emitter>
|
43 | </Loader>
|
44 | )
|
45 | .then(a=>console.log(a))
|
46 | .catch(e=>console.error(e))
|
47 |
|
48 | //to view test.docx in browser in pages
|
49 | import {Loader, Viewer, Representation} from "we-edit"
|
50 | import iDocx from "we-edit/input-docx"
|
51 | import lsBrowser from "we-edit/loader-stream-browser"
|
52 | import * from "we-edit/representation-pagination"
|
53 | import ReactDOM from "react-dom"
|
54 |
|
55 | iDocx.install()
|
56 | lsBrowser.install()
|
57 | ReactDOM.render(
|
58 | <Loader type="browser">
|
59 | <Viewer representation={<Representation type="pagination"/>}>
|
60 | </Loader>,
|
61 | document.body
|
62 | )
|
63 |
|
64 | //to edit test.docx in browser in pages
|
65 | import {Loader, Editor, Representation} from "we-edit"
|
66 | import iDocx from "we-edit/input-docx"
|
67 | import lsBrowser from "we-edit/loader-stream-browser"
|
68 | import * from "we-edit/representation-pagination"
|
69 | import ReactDOM from "react-dom"
|
70 |
|
71 | iDocx.install()
|
72 | lsBrowser.install()
|
73 | ReactDOM.render(
|
74 | <Loader type="browser">
|
75 | <Editor representation="pagination"/>
|
76 | </Loader>,
|
77 | document.body
|
78 | )
|
79 |
|
80 | //or without loader to use load of Input Type
|
81 | iDocx.load(file)
|
82 | .then(doc=>{
|
83 | return ReactDOM.render(
|
84 | <doc.Store>
|
85 | <Editor representation="pagination"/>
|
86 | </doc.Store>,
|
87 | document.body
|
88 | )
|
89 | })
|
90 |
|
91 | //to edit test.docx in browser in pages, and view in html
|
92 | import {Loader, Editor, Representation} from "we-edit"
|
93 | import iDocx from "we-edit/input-docx"
|
94 | import lsBrowser from "we-edit/loader-stream-browser"
|
95 | import * from "we-edit/representation-pagination"
|
96 | import * from "we-edit/representation-html"
|
97 | import ReactDOM from "react-dom"
|
98 | iDocx.install()
|
99 | lsBrowser.install()
|
100 | ReactDOM.render(
|
101 | <Loader type="browser">
|
102 | <div style={{position:"absolute",left:0,width:500}}>
|
103 | <Editor representation="pagination"/>
|
104 | </div>
|
105 |
|
106 | <div style={{position:"absolute",right:0,width:500}}>
|
107 | <Viewer representation="html"/>
|
108 | </div>
|
109 | </Loader>,
|
110 | document.body
|
111 | )
|
112 |
|
113 | //for more featur office, check we-edit-office
|
114 | ```
|
115 |
|
116 |
|
117 | ## API
|
118 |
|
119 | ### top level
|
120 |
|
121 | #### Input: API to extend supported files
|
122 | * Viewable: base class to extend view only file
|
123 | * Editable: base class to extend editable file
|
124 | * get(type:string): get Viewable/EditableDocument type
|
125 | * resolveFileType({data,ext,name,type,mimeType, ...extendedProps}): try to find supported document type according to props
|
126 | * parse(file:Blob|Object|Buffer|...): parse input file to a we-edit models
|
127 | * return object with following important fields
|
128 | * Store: redux store reprensenting the input file
|
129 | * doc: [Input Type].parse() return
|
130 | * name, id,
|
131 | * buildReducer: to extend reducer of Store
|
132 |
|
133 | #### React components
|
134 | * WeEdit: auto manage multiple document state stores
|
135 | * WeEditUI, Office, Workspace,
|
136 | * Ribbon,
|
137 | * StatusBar, TitleBar, Canvas, Dashboard,
|
138 | * reducer,
|
139 | * create
|
140 |
|
141 | * Loader[type]: input
|
142 | * Stream[type]: output
|
143 | * Stream.Collection
|
144 |
|
145 | * Editor
|
146 | * Viewer
|
147 | * Emitter
|
148 | * Emitter.Format[type]
|
149 |
|
150 | * document models
|
151 |
|
152 | * Represenation[type]
|
153 | * Representation.[html|text|pagination|...].Output
|
154 |
|
155 |
|
156 | * Cursor: wrapper of cursor shape
|
157 | * Selection: wrapper of selection shape
|
158 |
|
159 | * DocumentTree: tree structure of document
|
160 |
|
161 | #### state
|
162 | * ACTION
|
163 | * DOMAIN="we-edit"
|
164 | * reducer
|
165 | * getActive
|
166 | * getContent
|
167 | * getSelection
|
168 | * getFile
|
169 | * getUndos
|
170 | * getRedos
|
171 |
|
172 | #### tools
|
173 | * getClientRect
|
174 | * shallowEqual
|
175 | * uuid
|
176 |
|
177 | ### document models
|
178 | * Unknown,
|
179 | * Ignore,
|
180 | * Container,
|
181 | * Document,
|
182 | * Section,
|
183 | * Paragraph,
|
184 | * Text,
|
185 | * Image,
|
186 | * Table,
|
187 | * Row,
|
188 | * Cell,
|
189 | * Frame,
|
190 | * Shape,
|
191 | * Anchor,
|
192 | * Page,
|
193 | * Template,
|