react-native-cn-quill/lib/commonjs/constants/editor/editor_css.js

react-native quill richtext editor

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.editor_css = void 0;

const getFontName = font => {
  return font.toLowerCase().replace(/\s/g, '-');
};

const editor_css = (editorId, containerId, autoSize, color = 'rgb(32, 35, 42)', background = 'white', placeholder = 'rgba(0,0,0,0.6)', fonts = [], defaultFont = undefined) => {
  let fontCss = '';
  fonts.forEach(f => {
    fontCss = fontCss + ' ' + f.css;
  });
  fonts.forEach(f => {
    fontCss = fontCss + `
      /* Set content font-families */
      .ql-font-${getFontName(f.name)} {
      font-family: "${f.name}";
      }
    `;
  });
  return `
<style>
* {outline: 0px solid transparent;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-touch-callout: none;box-sizing: border-box;}
html, body { margin: 0; padding: 0; height: 100%;}
body { overflow-y: hidden; -webkit-overflow-scrolling: touch;background-color: ${background};}
#${containerId} {
  color: ${color};
  ${autoSize ? `
    display: inline-block;
  ` : `
    height: 100%;
  `}
  width: 100%;
  -webkit-overflow-scrolling: touch;
  padding-left: 0;
  padding-right: 0;
}
#${editorId} {
  height: 100%;
  outline: 0;
  overflow-y: auto;
  padding: 0;
  ${defaultFont ? 'font-family: "' + defaultFont + '"' : ''}
}

#${editorId}:focus {
  outline: 0px solid transparent;
}

.ql-container.ql-snow {
  border: none;
}

.ql-container > .ql-editor.ql-blank::before{
  color: ${placeholder};
}

${fontCss}


</style>
`;
};

exports.editor_css = editor_css;
//# sourceMappingURL=editor_css.js.map