@docling/docling-components 0.0.6 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +98 -22
  2. package/dist/index.cjs +2840 -0
  3. package/dist/index.d.cts +180 -0
  4. package/dist/index.d.ts +180 -0
  5. package/dist/index.js +2796 -35
  6. package/package.json +61 -24
package/README.md CHANGED
@@ -24,76 +24,99 @@ Either download the package and serve it as part of the rest of the website, or
24
24
  <head>
25
25
  ...
26
26
 
27
- <script type="module" src="https://unpkg.com/@docling/docling-components" />
27
+ <script
28
+ type="module"
29
+ src="https://unpkg.com/@docling/docling-components/dist/index.es.js"
30
+ />
28
31
  </head>
29
32
 
30
33
  ...
31
34
  </html>
32
35
  ```
33
36
 
34
- ## Components
37
+ ## Document components
35
38
 
36
39
  ### docling-img
37
40
 
38
41
  This component displays the converted document in context of its original form, by showing the full page renderings that are embedded in the conversion JSON (for specific input document formats). Each document item is shown as a bounding box on top of the page.
39
42
 
40
43
  #### Plain use
44
+
41
45
  Similar to `<img>` you can point the component to the Docling JSON file.
42
46
 
43
47
  ```html
44
- <docling-img src="conversion.json" />
48
+ <docling-img src="conversion.json"></docling-img>
45
49
  ```
46
50
 
47
51
  Or load the document programmatically:
48
52
 
49
53
  ```html
50
54
  <script type="module">
51
- const cmp = document.getElementById("cmp");
55
+ const cmp = document.getElementById('cmp');
52
56
 
53
- const fetched = await fetch("conversion.json")
57
+ const fetched = await fetch('conversion.json');
54
58
  const doc = await fetched.json();
55
59
  cmp.src = doc;
56
60
  </script>
57
61
  ...
58
- <docling-img id="cmp" pagenumbers />
62
+ <docling-img id="cmp" pagenumbers></docling-img>
59
63
  ```
60
64
 
61
-
62
65
  #### Item filter and highlight
63
66
 
64
67
  Narrow down the marked document items according to their reference path in the converted document:
65
68
 
66
69
  ```html
67
- <docling-img src="conversion.json" items="#/pictures/3" />
70
+ <docling-img src="conversion.json" items="#/pictures/3"></docling-img>
68
71
  ```
69
72
 
70
73
  Select entire item categories with `items="#/pictures"`, full pages with `items="#/pages/2"`, and unions with `items="#/pictures, #/tables"`.
71
74
 
72
75
  Or select specific items programmatically:
76
+
73
77
  ```html
74
78
  <script type="module">
75
- const cmp = document.getElementById("cmp");
76
- const fetched = await fetch("conversion.json")
77
- const doc = await fetched.json();
78
- cmp.src = doc;
79
+ const cmp = document.getElementById('cmp');
80
+ const fetched = await fetch('conversion.json');
81
+ const doc = await fetched.json();
82
+ cmp.src = doc;
79
83
 
80
- // Select the first three tables.
81
- cmp.items = doc.tables.slice(0, 3);
84
+ // Select the first three tables.
85
+ cmp.items = doc.tables.slice(0, 3);
82
86
  </script>
83
87
  ...
84
- <docling-img id="cmp" pagenumbers />
88
+ <docling-img id="cmp" pagenumbers></docling-img>
85
89
  ```
86
90
 
87
91
  To emphasize item selections, you can suppress the non-selection into a page backdrop and/or trim out the pages without any selected items:
88
92
 
89
93
  ```html
90
- <docling-img src="conversion.json" items="#/pictures" trim="pages" backdrop />
94
+ <docling-img
95
+ src="conversion.json"
96
+ items="#/pictures"
97
+ trim="pages"
98
+ backdrop
99
+ ></docling-img>
100
+ ```
101
+
102
+ #### Tooltip
103
+
104
+ Pops up a tooltip besides an item when you hover it on a page. This tooltip shows the item's parsed content and annotations if matching web components are available:
105
+
106
+ ```html
107
+ <docling-img src="conversion.json">
108
+ <docling-tooltip></docling-tooltip>
109
+ </docling-img>
91
110
  ```
92
111
 
93
- #### Tooltips
94
- Overlay a tooltip when you hover a parsed item on a page, showing its contents:
112
+ #### Overlay
113
+
114
+ Overlays parsed content and annotations directly on top of items (potentially occluding them).
115
+
95
116
  ```html
96
- <docling-img src="conversion.json" tooltip="parsed" />
117
+ <docling-img src="conversion.json">
118
+ <docling-overlay></docling-overlay>
119
+ </docling-img>
97
120
  ```
98
121
 
99
122
  ### docling-table
@@ -103,18 +126,71 @@ This component displays the converted document as a table of parsed document ite
103
126
  #### Plain use
104
127
 
105
128
  ```html
106
- <docling-table src="conversion.json" />
129
+ <docling-table src="conversion.json"></docling-table>
107
130
  ```
108
131
 
109
132
  You can select items with the `items` attributes, as described for the `docling-img` component. Selecting items will trim all non-selected items from view.
110
133
 
111
134
  #### Configure columns
135
+
112
136
  Select the columns that you want to have shown and in what order:
137
+
113
138
  ```html
114
- <docling-table src="conversion.json" columns="parsed,image" />
139
+ <docling-table src="conversion.json">
140
+ <docling-column>
141
+ <docling-item-text></docling-item-text>
142
+ <docling-item-table></docling-item-table>
143
+ </docling-column>
144
+ <docling-column>
145
+ <docling-item-provenance></docling-item-provenance>
146
+ </docling-column>
147
+ </docling-table>
115
148
  ```
116
149
 
117
150
  You can use this to display the cropped image of a single document item as well:
151
+
118
152
  ```html
119
- <docling-table src="conversion.json" columns="image" items="#/tables/2" />
153
+ <docling-table src="conversion.json" items="#/tables/2">
154
+ <docling-column>
155
+ <docling-item-provenance></docling-item-provenance>
156
+ </docling-column>
157
+ </docling-table>
120
158
  ```
159
+
160
+ ## Item components
161
+
162
+ Most types of document item have a prepackaged component that will be used to visualize it:
163
+
164
+ | Tag | Item label |
165
+ | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
166
+ | `<docling-item-text>` | checkbox_selected<br /> checkbox_unselected<br /> footnote<br /> page_footer<br /> page_header<br /> paragraph<br /> text<br /> reference |
167
+ | `<docling-item-table>` | table |
168
+
169
+ You can use these tags directly with elements like `<docling-tooltip>` to specify what components will be used, including optional parameters. For example, to exclusively show tooltips for table components:
170
+
171
+ ```
172
+ <docling-tooltip>
173
+ <docling-item-table></docling-item-table>
174
+ </docling-tooltip>
175
+ ```
176
+
177
+ You can create your own item components by extending from the `DoclingItemElement` class at `/src/item/ItemElement.ts` and annotating the class with `@customDoclingItemElement('docling-my-first-item-component')` to have it registered as both a custom web element and as a default component for rendering document items.
178
+
179
+ ## Annotation components
180
+
181
+ Some types of document item annotation have a prepackaged component that will be used to visualize it:
182
+
183
+ | Tag | Item label | Annotation kind |
184
+ | ---------------------------------- | -------------------- | --------------- |
185
+ | `<docling-picture-classification>` | chart <br /> picture | classification |
186
+ | `<docling-picture-description>` | chart <br /> picture | description |
187
+
188
+ You can use these tags directly with elements like `<docling-tooltip>` to specify what components will be used. For example, to overlay pictures with their classification, if any:
189
+
190
+ ```
191
+ <docling-overlay>
192
+ <docling-picture-classification></docling-picture-classification>
193
+ </docling-overlay>
194
+ ```
195
+
196
+ You can create your own annotation components by extending from the `DoclingAnnotationElement` class at `/src/annotation/AnnotationElement.ts` and annotating the class with `@customDoclingAnnotationElement('docling-my-first-annotation-component')` to have it registered as both a custom web element and as a default component for rendering document annotations.