BookStack Code Mirror - bookstack/blob - resources/views/pages/parts/markdown-editor.blade.php

   1 <div id="markdown-editor" component="markdown-editor"
   2      option:markdown-editor:page-id="{{ $model->id ?? 0 }}"
   3      option:markdown-editor:text-direction="{{ config('app.rtl') ? 'rtl' : 'ltr' }}"
   4      option:markdown-editor:image-upload-error-text="{{ trans('errors.image_upload_error') }}"
   5      option:markdown-editor:server-upload-limit-text="{{ trans('errors.server_upload_limit') }}"
   6      class="flex-fill flex code-fill">
   7
   8     <div class="markdown-editor-wrap active">
   9         <div class="editor-toolbar flex-container-row items-stretch justify-space-between">
  10             <div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
  11                 <span>{{ trans('entities.pages_md_editor') }}</span>
  12             </div>
  13             <div component="dropdown" class="buttons flex-container-row items-stretch">
  14                 @if(config('services.drawio'))
  15                     <button class="text-button" type="button" data-action="insertDrawing" title="{{ trans('entities.pages_md_insert_drawing') }}">@icon('drawing')</button>
  16                 @endif
  17                 <button class="text-button" type="button" data-action="insertImage" title="{{ trans('entities.pages_md_insert_image') }}">@icon('image')</button>
  18                 <button class="text-button" type="button" data-action="insertLink" title="{{ trans('entities.pages_md_insert_link') }}">@icon('link')</button>
  19                 <button class="text-button" type="button" data-action="fullscreen" title="{{ trans('common.fullscreen') }}">@icon('fullscreen')</button>
  20                 <button refs="dropdown@toggle" class="text-button" type="button" title="{{ trans('common.more') }}">@icon('more')</button>
  21                 <div refs="dropdown@menu markdown-editor@setting-container" class="dropdown-menu" role="menu">
  22                     <div class="px-m">
  23                         @include('form.toggle-switch', ['name' => 'md-show-preview', 'label' => trans('entities.pages_md_show_preview'), 'value' => setting()->getForCurrentUser('md-show-preview')])
  24                     </div>
  25                     <hr class="m-none">
  26                     <div class="px-m">
  27                         @include('form.toggle-switch', ['name' => 'md-scroll-sync', 'label' => trans('entities.pages_md_sync_scroll'), 'value' => setting()->getForCurrentUser('md-scroll-sync')])
  28                     </div>
  29                 </div>
  30             </div>
  31         </div>
  32
  33         <div markdown-input class="flex flex-fill">
  34             <textarea id="markdown-editor-input"
  35                       refs="markdown-editor@input"
  36                       @if($errors->has('markdown')) class="text-neg" @endif
  37                       name="markdown"
  38                       rows="5">@if(isset($model) || old('markdown')){{ old('markdown') ?? ($model->markdown === '' ? $model->html : $model->markdown) }}@endif</textarea>
  39         </div>
  40
  41     </div>
  42
  43     <div class="markdown-editor-wrap" @if(!setting()->getForCurrentUser('md-show-preview')) style="display: none;" @endif>
  44         <div class="editor-toolbar">
  45             <div class="editor-toolbar-label text-mono px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
  46         </div>
  47         <iframe src="about:blank"
  48                 refs="markdown-editor@display"
  49                 class="markdown-display"
  50                 sandbox="allow-same-origin"></iframe>
  51     </div>
  52 </div>
  53
  54
  55
  56 @if($errors->has('markdown'))
  57     <div class="text-neg text-small">{{ $errors->first('markdown') }}</div>
  58 @endif