|
1 | | -## Description |
2 | | - |
3 | | -The file-mod manages file access |
4 | | - |
5 | | - |
6 | | -## Include |
7 | | - |
8 | | -requires component v3.0 |
9 | | - |
10 | | -``` |
11 | | -
|
12 | | - <file-mod component></file-mod> |
13 | | - |
14 | | -``` |
15 | | - |
16 | | -## initmod |
17 | | - |
18 | | - |
19 | | -name | description |
20 | | -----------|------------ |
21 | | -ext | helper loader library |
22 | | -$ | various dom helper functions |
23 | | -menumod | the menumod library |
24 | | - | |
25 | | -menu | reference to the menu to add its menu's to |
26 | | -source | the source text |
27 | | -focus | function to reset focus |
28 | | -log | reference to log-mod component |
29 | | - | |
30 | | -complete | handles loading ( complete.load ) and saving ( complete.save ) |
31 | | - |
32 | | - |
33 | | -## attribute |
34 | | - |
35 | | -these attribute can be defined on the html tag itself |
36 | | - |
37 | | -attribute | description |
38 | | ---------- |----------- |
39 | | -none | no supported attributes |
40 | | - |
41 | | - |
42 | | -## module |
43 | 1 |
|
44 | 2 |
|
45 | | -name|description |
46 | | ----|--- |
47 | | -**standard** | |
48 | | -initmod|standard function for importing local dependencies |
49 | | -init|standard initialisation function |
50 | | -initdom|standard function to setup the dom |
51 | | - | |
52 | | -save ( file ) | read source blob and save under *file* or current file |
53 | | -clear () | clear the current file |
54 | | -new ( ...opts ) | alias for newfile |
55 | | -[newfile](#file-descriptor) ( ...opts ) | create a new file desciptor object |
56 | | -export ( file ) | serialise *file* |
57 | | -import ( file ) | deserialise *file* |
58 | | -test()|display test data |
59 | | - |
60 | | - |
61 | | - |
62 | | -<!-- |
63 | | -
|
64 | | -### doThing(input, [options], ...extras) |
65 | | -
|
66 | | -Performs the main operation. |
| 3 | +## Description |
67 | 4 |
|
68 | | -#### Parameters |
69 | | -- **input** — string or object to process |
70 | | -- **[options]** — optional settings |
71 | | - - **[options.mode="fast"]** — processing mode |
72 | | - - **[options.verbose=false]** — enable verbose output |
73 | | -- **...extras** — additional values appended to the operation |
| 5 | +<div class=desc-txt> |
74 | 6 |
|
75 | | -#### Returns |
76 | | -- **Promise<Result>** |
| 7 | +The web-editor component produces an editor in the webpage |
77 | 8 |
|
78 | | -#### Result |
79 | | -- **success** — boolean indicating whether the operation succeeded |
80 | | -- **value** — the processed output |
81 | | -- **warnings** — array of strings describing non‑fatal issues |
82 | | -- **durationMs** — number of milliseconds the operation took |
| 9 | +A modern, feature‑rich text editor built directly into the browser, this component is designed to make writing and editing feel effortless. Whether you’re building documentation tools, note‑taking apps, or custom content interfaces, it provides a smooth, polished experience that fits naturally into any webpage. Its clean interface keeps the focus on the text, while thoughtful details make everyday editing tasks quicker and more intuitive. |
83 | 10 |
|
84 | | -#### Errors |
85 | | -The promise rejects with: |
86 | | -- **TypeError** — thrown when `input` is missing or invalid |
87 | | -- **OperationError** — thrown when processing fails internally |
88 | | -- **TimeoutError** — thrown when the operation takes too long |
| 11 | +Under the hood, the editor offers a flexible architecture that adapts to a wide range of use cases. It supports rich formatting, keyboard shortcuts, custom styling, and extensible behaviours, giving developers the freedom to tailor the writing environment to their needs. Despite its capabilities, it remains lightweight and responsive, ensuring fast load times and a fluid typing experience even in complex layouts. |
89 | 12 |
|
90 | | ---> |
| 13 | +This component is built with usability in mind, making it just as comfortable for casual writing as it is for more structured content creation. Whether you’re embedding it in a small widget or using it as the core of a larger application, it provides a dependable, modern editing foundation that feels right at home on the web. |
91 | 14 |
|
| 15 | +</div> |
92 | 16 |
|
93 | | -## api |
94 | 17 |
|
| 18 | +--- {.hr-main} |
95 | 19 |
|
96 | | -### save ( file ) |
| 20 | +## Include |
97 | 21 |
|
98 | | -reads a blob from source and saves it according to the file descriptor, then calls complete.save( file ) |
| 22 | +``` |
99 | 23 |
|
| 24 | + <web-editor component></web-editor> |
| 25 | + |
| 26 | +``` |
100 | 27 |
|
101 | | -### clear ( ) |
102 | 28 |
|
103 | | -clear the current file. file-mod maintains a reference to the current file so that save can be called |
104 | | -externally, ie say ctrl-s |
| 29 | +--- {.hr-main} |
105 | 30 |
|
| 31 | +## initmod |
106 | 32 |
|
107 | | -### new () |
108 | 33 |
|
109 | | -alias for newfile |
| 34 | +name | description |
| 35 | +----------|------------ |
| 36 | +ext | reference to ext-loader |
| 37 | +$ | reference to $ library |
| 38 | +ace | reference to ace editor, else each instance of snippet-console loads its own |
| 39 | +menu | reference to the menu group snippet-console should use, else it creates its own |
| 40 | +menumod | reference to menumod library, only required if menu is not given |
| 41 | +config | config parameters, see below |
| 42 | +fullsize | true|false whether the editor should display the entire document |
| 43 | +kd | callback for keydown event |
| 44 | +on | callback for various events, see below |
| 45 | +mode | the mode for the editor, javascript,css,html etc |
| 46 | +embed | a dom node that the component will take its attributes from |
110 | 47 |
|
111 | 48 |
|
112 | | -<div id=file-descriptor style='scroll-margin-top: 80px'> |
| 49 | +#### config |
113 | 50 |
|
114 | | -### newfile ({filetype,path,name,rel,kind,size,ctime,mtime,atime,title,icon}) |
| 51 | +config.mode - set the mode for the editor, javascript,css,html,python etc |
115 | 52 |
|
116 | | -</div> |
| 53 | +config.fullsize - true|false whether the editor should display the entire document |
117 | 54 |
|
118 | | -create a file descriptor object |
| 55 | +config.height - set the height of the editor |
119 | 56 |
|
120 | | -#### Parameters |
121 | 57 |
|
122 | | -- **filetype || ft** = the filetype ( localfile,github,googlestorage ... ) |
| 58 | +#### on |
123 | 59 |
|
124 | | -- **abs** = the absolute path of the file |
| 60 | +on.change - callback when the editor has a change event |
125 | 61 |
|
126 | | -- **path** = path of the file |
127 | 62 |
|
128 | | -- **name** = the name of the file |
| 63 | +--- {.hr-main} |
129 | 64 |
|
130 | | -- **rel** = relative path for the file, should this be relevant |
| 65 | +## attribute |
131 | 66 |
|
132 | | -- **kind** = kind of file structure this file object represents ( file,directory ) |
133 | 67 |
|
134 | | -- **size** = the size of the file in bytes |
135 | 68 |
|
136 | | -- **ctime** = the create time of the file |
| 69 | +these attribute can be defined on the html tag itself |
137 | 70 |
|
138 | | -- **mtime** = the modified time of the file |
| 71 | +attribute | description |
| 72 | +--------- |----------- |
| 73 | +src | src url to load |
| 74 | +h \|\| height | set the height of the editor |
| 75 | +mode | set the mode for the editor |
| 76 | +fullsize | boolean attribute, whether the editor display the entire document |
139 | 77 |
|
140 | | -- **atime** = the last access time of the file |
141 | 78 |
|
142 | | -- **title** = the title for the file |
| 79 | +--- {.hr-main} |
143 | 80 |
|
144 | | -- **icon** = an icon for the file |
| 81 | +## module |
145 | 82 |
|
146 | | -#### Returns |
| 83 | +name|description |
| 84 | +---|--- |
| 85 | +**standard** | |
| 86 | +initmod | standard function for importing local dependencies |
| 87 | +init | standard initialisation function |
| 88 | +initdom | standard function to setup the dom |
| 89 | + | |
| 90 | +filename ( file ) | set the filename that the editor display, also sets the mode |
| 91 | +filename.getname ( path ) | helper function to return the filename from a path |
| 92 | +filename.save ( status ) | show or hide the save status icon |
| 93 | +filename.save.show () | show the save status icon |
| 94 | +filename.save.hide () | hide the save status icon |
| 95 | +filename.clear () | clear the filename |
| 96 | +filename.read () | read the current filename |
| 97 | +clear () | clear the editor |
| 98 | +set \|\| setvalue \|\| setValue ( txt ) | set the text of the editor |
| 99 | +get \|\| getvalue \|\| getValue () | get the text of the editor |
| 100 | +focus () | set focus to the editor |
| 101 | +resize () | update the editor dimensions ( width / height ) |
| 102 | +load ( src ) | |
| 103 | +horiz () | set the editor to horizontal mode |
| 104 | +vert () | set the editor to vertical mode |
| 105 | +height | setter to set the height of the editor |
| 106 | +mode | getter / setter to get and set the mode of the editor |
147 | 107 |
|
148 | | -- **Object** — the file descriptor |
149 | 108 |
|
150 | | -#### Errors |
151 | | -- **none** |
152 | 109 |
|
153 | | -### export ( [file] ) |
154 | 110 |
|
155 | | -serialise and return file or the current file |
156 | 111 |
|
157 | 112 |
|
158 | 113 |
|
|
0 commit comments