lib/editor/tiny/js/tinymce/plugins/preview/plugin.js

   1 /**
   2  * TinyMCE version 6.6.2 (2023-08-09)
   3  */
   4
   5 (function () {
   6     'use strict';
   7
   8     var global$2 = tinymce.util.Tools.resolve('tinymce.PluginManager');
   9
  10     var global$1 = tinymce.util.Tools.resolve('tinymce.Env');
  11
  12     var global = tinymce.util.Tools.resolve('tinymce.util.Tools');
  13
  14     const option = name => editor => editor.options.get(name);
  15     const getContentStyle = option('content_style');
  16     const shouldUseContentCssCors = option('content_css_cors');
  17     const getBodyClass = option('body_class');
  18     const getBodyId = option('body_id');
  19
  20     const getPreviewHtml = editor => {
  21       var _a;
  22       let headHtml = '';
  23       const encode = editor.dom.encode;
  24       const contentStyle = (_a = getContentStyle(editor)) !== null && _a !== void 0 ? _a : '';
  25       headHtml += '<base href="' + encode(editor.documentBaseURI.getURI()) + '">';
  26       const cors = shouldUseContentCssCors(editor) ? ' crossorigin="anonymous"' : '';
  27       global.each(editor.contentCSS, url => {
  28         headHtml += '<link type="text/css" rel="stylesheet" href="' + encode(editor.documentBaseURI.toAbsolute(url)) + '"' + cors + '>';
  29       });
  30       if (contentStyle) {
  31         headHtml += '<style type="text/css">' + contentStyle + '</style>';
  32       }
  33       const bodyId = getBodyId(editor);
  34       const bodyClass = getBodyClass(editor);
  35       const isMetaKeyPressed = global$1.os.isMacOS() || global$1.os.isiOS() ? 'e.metaKey' : 'e.ctrlKey && !e.altKey';
  36       const preventClicksOnLinksScript = '<script>' + 'document.addEventListener && document.addEventListener("click", function(e) {' + 'for (var elm = e.target; elm; elm = elm.parentNode) {' + 'if (elm.nodeName === "A" && !(' + isMetaKeyPressed + ')) {' + 'e.preventDefault();' + '}' + '}' + '}, false);' + '</script> ';
  37       const directionality = editor.getBody().dir;
  38       const dirAttr = directionality ? ' dir="' + encode(directionality) + '"' : '';
  39       const previewHtml = '<!DOCTYPE html>' + '<html>' + '<head>' + headHtml + '</head>' + '<body id="' + encode(bodyId) + '" class="mce-content-body ' + encode(bodyClass) + '"' + dirAttr + '>' + editor.getContent() + preventClicksOnLinksScript + '</body>' + '</html>';
  40       return previewHtml;
  41     };
  42
  43     const open = editor => {
  44       const content = getPreviewHtml(editor);
  45       const dataApi = editor.windowManager.open({
  46         title: 'Preview',
  47         size: 'large',
  48         body: {
  49           type: 'panel',
  50           items: [{
  51               name: 'preview',
  52               type: 'iframe',
  53               sandboxed: true,
  54               transparent: false
  55             }]
  56         },
  57         buttons: [{
  58             type: 'cancel',
  59             name: 'close',
  60             text: 'Close',
  61             primary: true
  62           }],
  63         initialData: { preview: content }
  64       });
  65       dataApi.focus('close');
  66     };
  67
  68     const register$1 = editor => {
  69       editor.addCommand('mcePreview', () => {
  70         open(editor);
  71       });
  72     };
  73
  74     const register = editor => {
  75       const onAction = () => editor.execCommand('mcePreview');
  76       editor.ui.registry.addButton('preview', {
  77         icon: 'preview',
  78         tooltip: 'Preview',
  79         onAction
  80       });
  81       editor.ui.registry.addMenuItem('preview', {
  82         icon: 'preview',
  83         text: 'Preview',
  84         onAction
  85       });
  86     };
  87
  88     var Plugin = () => {
  89       global$2.add('preview', editor => {
  90         register$1(editor);
  91         register(editor);
  92       });
  93     };
  94
  95     Plugin();
  96
  97 })();