mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
4 years ago
6 changed files with 124 additions and 123 deletions
@ -1,107 +0,0 @@ |
|||
/** |
|||
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/parser/config/config.js)
|
|||
* ```js
|
|||
* const editor = grapesjs.init({ |
|||
* parser: { |
|||
* // options
|
|||
* } |
|||
* }) |
|||
* ``` |
|||
* |
|||
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance |
|||
* |
|||
* ```js
|
|||
* const { Parser } = editor; |
|||
* ``` |
|||
* ## Available Events |
|||
* * `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument |
|||
* * `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument |
|||
* |
|||
* ## Methods |
|||
* * [getConfig](#getconfig) |
|||
* * [parseHtml](#parsehtml) |
|||
* * [parseCss](#parsecss) |
|||
* |
|||
* @module Parser |
|||
*/ |
|||
import defaults from './config/config'; |
|||
import parserCss from './model/ParserCss'; |
|||
import parserHtml from './model/ParserHtml'; |
|||
|
|||
export default () => { |
|||
let conf = {}; |
|||
let pHtml, pCss; |
|||
|
|||
return { |
|||
compTypes: '', |
|||
|
|||
parserCss: null, |
|||
|
|||
parserHtml: null, |
|||
|
|||
name: 'Parser', |
|||
|
|||
init(config = {}) { |
|||
conf = { ...defaults, ...config }; |
|||
conf.Parser = this; |
|||
pHtml = new parserHtml(conf); |
|||
pCss = new parserCss(conf); |
|||
this.em = conf.em; |
|||
this.parserCss = pCss; |
|||
this.parserHtml = pHtml; |
|||
return this; |
|||
}, |
|||
|
|||
/** |
|||
* Get the configuration object |
|||
* @returns {Object} Configuration object |
|||
* @example |
|||
* console.log(Parser.getConfig()) |
|||
*/ |
|||
getConfig() { |
|||
return conf; |
|||
}, |
|||
|
|||
/** |
|||
* Parse HTML string and return the object containing the Component Definition |
|||
* @param {String} input HTML string to parse |
|||
* @param {Object} [options] Options |
|||
* @param {String} [options.htmlType] [HTML mime type](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02) to parse
|
|||
* @param {Boolean} [options.allowScripts=false] Allow `<script>` tags |
|||
* @param {Boolean} [options.allowUnsafeAttr=false] Allow unsafe HTML attributes (eg. `on*` inline event handlers) |
|||
* @returns {Object} Object containing the result `{ html: ..., css: ... }` |
|||
* @example |
|||
* const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, { |
|||
* htmlType: 'text/html', // default
|
|||
* }); |
|||
* // By using the `text/html`, this will fix automatically all the HTML syntax issues
|
|||
* // Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
|
|||
* const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, { |
|||
* htmlType: 'application/xml', |
|||
* }); |
|||
* // This will preserve the original format as, from the XML point of view, is a valid format
|
|||
*/ |
|||
parseHtml(input, options = {}) { |
|||
const { em, compTypes } = this; |
|||
pHtml.compTypes = em ? em.get('DomComponents').getTypes() : compTypes; |
|||
return pHtml.parse(input, pCss, options); |
|||
}, |
|||
|
|||
/** |
|||
* Parse CSS string and return an array of valid definition objects for CSSRules |
|||
* @param {String} input CSS string to parse |
|||
* @returns {Array<Object>} Array containing the result |
|||
* @example |
|||
* const res = Parser.parseCss('.cls { color: red }'); |
|||
* // [{ ... }]
|
|||
*/ |
|||
parseCss(input) { |
|||
return pCss.parse(input); |
|||
}, |
|||
|
|||
destroy() { |
|||
[conf, pHtml, pCss].forEach(i => (i = {})); |
|||
['em', 'parserCss', 'parserHtml'].forEach(i => (this[i] = {})); |
|||
}, |
|||
}; |
|||
}; |
|||
@ -0,0 +1,92 @@ |
|||
/** |
|||
* You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/parser/config/config.js)
|
|||
* ```js
|
|||
* const editor = grapesjs.init({ |
|||
* parser: { |
|||
* // options
|
|||
* } |
|||
* }) |
|||
* ``` |
|||
* |
|||
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance |
|||
* |
|||
* ```js
|
|||
* const { Parser } = editor; |
|||
* ``` |
|||
* ## Available Events |
|||
* * `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument |
|||
* * `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument |
|||
* |
|||
* ## Methods |
|||
* * [getConfig](#getconfig) |
|||
* * [parseHtml](#parsehtml) |
|||
* * [parseCss](#parsecss) |
|||
* |
|||
* @module Parser |
|||
*/ |
|||
import { Module } from '../abstract'; |
|||
import EditorModel from '../editor/model/Editor'; |
|||
import defaults, { ParserConfig } from './config/config'; |
|||
import parserCss from './model/ParserCss'; |
|||
import parserHtml from './model/ParserHtml'; |
|||
|
|||
export default class ParserModule extends Module<ParserConfig & { name?: string }> { |
|||
parserHtml: ReturnType<typeof parserHtml>; |
|||
parserCss: ReturnType<typeof parserCss>; |
|||
|
|||
constructor(em: EditorModel) { |
|||
super(em, 'Parser', defaults); |
|||
const { config } = this; |
|||
this.parserCss = parserCss(em, config); |
|||
this.parserHtml = parserHtml(em, config); |
|||
} |
|||
|
|||
/** |
|||
* Get the configuration object |
|||
* @returns {Object} Configuration object |
|||
* @example |
|||
* console.log(Parser.getConfig()) |
|||
*/ |
|||
getConfig() { |
|||
return this.config; |
|||
} |
|||
|
|||
/** |
|||
* Parse HTML string and return the object containing the Component Definition |
|||
* @param {String} input HTML string to parse |
|||
* @param {Object} [options] Options |
|||
* @param {String} [options.htmlType] [HTML mime type](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02) to parse
|
|||
* @param {Boolean} [options.allowScripts=false] Allow `<script>` tags |
|||
* @param {Boolean} [options.allowUnsafeAttr=false] Allow unsafe HTML attributes (eg. `on*` inline event handlers) |
|||
* @returns {Object} Object containing the result `{ html: ..., css: ... }` |
|||
* @example |
|||
* const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, { |
|||
* htmlType: 'text/html', // default
|
|||
* }); |
|||
* // By using the `text/html`, this will fix automatically all the HTML syntax issues
|
|||
* // Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
|
|||
* const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, { |
|||
* htmlType: 'application/xml', |
|||
* }); |
|||
* // This will preserve the original format as, from the XML point of view, is a valid format
|
|||
*/ |
|||
parseHtml(input: string, options = {}) { |
|||
const { em, parserHtml } = this; |
|||
parserHtml.compTypes = (em.Components.getTypes() || {}) as any; |
|||
return parserHtml.parse(input, this.parserCss, options); |
|||
} |
|||
|
|||
/** |
|||
* Parse CSS string and return an array of valid definition objects for CSSRules |
|||
* @param {String} input CSS string to parse |
|||
* @returns {Array<Object>} Array containing the result |
|||
* @example |
|||
* const res = Parser.parseCss('.cls { color: red }'); |
|||
* // [{ ... }]
|
|||
*/ |
|||
parseCss(input: string) { |
|||
return this.parserCss.parse(input); |
|||
} |
|||
|
|||
destroy() {} |
|||
} |
|||
Loading…
Reference in new issue