solid-panes/lib/humanReadablePane.js

Solid-compatible Panes: applets and views for the mashlib and databrowser

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _solidUi = require("solid-ui");
var _rdflib = require("rdflib");
var _marked = require("marked");
var _dompurify = _interopRequireDefault(require("dompurify"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/*   Human-readable Pane
 **
 **  This outline pane contains the document contents for an HTML document
 **  This is for peeking at a page, because the user might not want to leave the data browser.
 */

var humanReadablePane = {
  icon: _solidUi.icons.originalIconBase + 'tango/22-text-x-generic.png',
  name: 'humanReadable',
  label: function label(subject, context) {
    var kb = context.session.store;

    //   See also the source pane, which has lower precedence.

    var allowed = ['text/plain', 'text/html', 'text/markdown', 'application/xhtml+xml', 'image/png', 'image/jpeg', 'application/pdf', 'video/mp4'];
    var hasContentTypeIn = function hasContentTypeIn(kb, x, displayables) {
      var cts = kb.fetcher.getHeader(x, 'content-type');
      if (cts) {
        for (var j = 0; j < cts.length; j++) {
          for (var k = 0; k < displayables.length; k++) {
            if (cts[j].indexOf(displayables[k]) >= 0) {
              return true;
            }
          }
        }
      }
      return false;
    };

    // This data could come from a fetch OR from ldp container
    var hasContentTypeIn2 = function hasContentTypeIn2(kb, x, displayables) {
      var t = kb.findTypeURIs(x);
      for (var k = 0; k < displayables.length; k++) {
        if (_rdflib.Util.mediaTypeClass(displayables[k]).uri in t) {
          return true;
        }
      }
      return false;
    };
    if (!subject.uri) return null; // no bnodes

    var t = kb.findTypeURIs(subject);
    if (t[_solidUi.ns.link('WebPage').uri]) return 'view';
    if (hasContentTypeIn(kb, subject, allowed) || hasContentTypeIn2(kb, subject, allowed)) {
      return 'View';
    }
    return null;
  },
  render: function render(subject, context) {
    var myDocument = context.dom;
    var div = myDocument.createElement('div');
    var kb = context.session.store;
    var cts = kb.fetcher.getHeader(subject.doc(), 'content-type');
    var ct = cts ? cts[0].split(';', 1)[0].trim() : null; // remove content-type parameters
    if (ct) {
      // console.log('humanReadablePane: c-t:' + ct)
    } else {
      console.log('humanReadablePane: unknown content-type?');
    }

    //  @@ When we can, use CSP to turn off scripts within the iframe
    div.setAttribute('class', 'docView');
    var element = ct === 'text/markdown' ? 'DIV' : 'IFRAME';
    var frame = myDocument.createElement(element);
    var setIframeAttributes = function setIframeAttributes(frame, blob, lines) {
      frame.setAttribute('src', URL.createObjectURL(blob));
      frame.setAttribute('type', blob.type);
      frame.setAttribute('class', 'doc');
      frame.setAttribute('style', "border: 1px solid; padding: 1em; height: ".concat(lines, "em; width: 800px; resize: both; overflow: auto;"));

      // Apply sandbox attribute only for HTML files
      // @@ Note below - if we set ANY sandbox, then Chrome and Safari won't display it if it is PDF.
      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
      // You can't have any sandbox and allow plugins.
      // We could sandbox only HTML files I suppose.
      if (blob.type === 'text/html' || blob.type === 'application/xhtml+xml') {
        frame.setAttribute('sandbox', 'allow-scripts allow-same-origin');
      }
    };

    // render markdown to html
    var markdownHtml = function markdownHtml() {
      kb.fetcher.webOperation('GET', subject.uri).then(function (response) {
        var markdownText = response.responseText;
        var lines = Math.min(30, markdownText.split(/\n/).length + 5);
        var res = _marked.marked.parse(markdownText);
        var clean = _dompurify["default"].sanitize(res);
        frame.innerHTML = clean;
        frame.setAttribute('class', 'doc');
        frame.setAttribute('style', "border: 1px solid; padding: 1em; height: ".concat(lines, "em; width: 800px; resize: both; overflow: auto;"));
      })["catch"](function (error) {
        console.error('Error fetching markdown content:', error);
        frame.innerHTML = '<p>Error loading content</p>';
      });
    };
    if (ct === 'text/markdown') {
      markdownHtml();
    } else {
      // Fetch and process the blob
      kb.fetcher._fetch(subject.uri).then(function (response) {
        return response.blob();
      }).then(function (blob) {
        var blobTextPromise = blob.type.startsWith('text') ? blob.text() : Promise.resolve('');
        return blobTextPromise.then(function (blobText) {
          return {
            blob: blob,
            blobText: blobText
          };
        });
      }).then(function (_ref) {
        var blob = _ref.blob,
          blobText = _ref.blobText;
        var newLines = blobText.includes('<script src="https://dokie.li/scripts/dokieli.js">') ? -10 : 5;
        var lines = Math.min(30, blobText.split(/\n/).length + newLines);
        setIframeAttributes(frame, blob, lines);
      })["catch"](function (err) {
        console.log('Error fetching or processing blob:', err);
      });
    }
    var tr = myDocument.createElement('TR');
    tr.appendChild(frame);
    div.appendChild(tr);
    return div;
  }
};
var _default = exports["default"] = humanReadablePane; // ends
//# sourceMappingURL=humanReadablePane.js.map