]> BookStack Code Mirror - bookstack/blob - resources/views/pages/parts/wysiwyg-editor.blade.php
Lexical: Added base table support and started resize handling
[bookstack] / resources / views / pages / parts / wysiwyg-editor.blade.php
1 <div component="wysiwyg-editor"
2      option:wysiwyg-editor:language="{{ $locale->htmlLang() }}"
3      option:wysiwyg-editor:page-id="{{ $model->id ?? 0 }}"
4      option:wysiwyg-editor:text-direction="{{ $locale->htmlDirection() }}"
5      option:wysiwyg-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}"
6      option:wysiwyg-editor:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}"
7      class="">
8
9     <div class="editor-container">
10         <div refs="wysiwyg-editor@edit-area" contenteditable="true">
11             <p id="Content!">Some <strong>content</strong> here</p>
12             <p>Content with image in, before text. <img src="https://bookstack.local/bookstack/uploads/images/gallery/2022-03/scaled-1680-/cats-image-2400x1000-2.jpg" width="200" alt="Sleepy meow"> After text.</p>
13             <p>This has a <a href="https://example.com" target="_blank" title="Link to example">link</a> in it</p>
14             <h2>List below this h2 header</h2>
15             <ul>
16                 <li>Hello</li>
17             </ul>
18
19             <details>
20                 <summary>Collapsible details/summary block</summary>
21                 <p>Inner text here</p>
22                 <h4>Inner Header</h4>
23                 <p>More text <strong>with bold in</strong> it</p>
24             </details>
25
26             <p class="callout info">
27                 Hello there, this is an info callout
28             </p>
29
30             <h3>Table</h3>
31
32             <table>
33                 <thead>
34                 <tr>
35                     <th>Cell A</th>
36                     <th>Cell B</th>
37                     <th>Cell C</th>
38                 </tr>
39                 </thead>
40                 <tbody>
41                 <tr>
42                     <td>Cell D</td>
43                     <td>Cell E</td>
44                     <td>Cell F</td>
45                 </tr>
46                 </tbody>
47             </table>
48         </div>
49     </div>
50
51     <div id="lexical-debug" style="white-space: pre-wrap; font-size: 12px; height: 200px; overflow-y: scroll; background-color: #000; padding: 1rem; border-radius: 4px; color: #FFF;"></div>
52
53 {{--    <textarea id="html-editor"  name="html" rows="5"--}}
54 {{--          @if($errors->has('html')) class="text-neg" @endif>@if(isset($model) || old('html')){{ old('html') ? old('html') : $model->html }}@endif</textarea>--}}
55 </div>
56
57 @if($errors->has('html'))
58     <div class="text-neg text-small">{{ $errors->first('html') }}</div>
59 @endif
60
61 {{--TODO - @include('form.editor-translations')--}}