Skip to content

Commit

Permalink
Merge pull request #151 from ckeditor/i/129
Browse files Browse the repository at this point in the history 
Fix: Improved rendering of GHS attributes in the inspector. Closes #129.
  • Loading branch information
@psmyrek
psmyrek authored Mar 22, 2022
2 parents 964d39f + 9c0a4f1 commit 5874d2a
Show file tree
Hide file tree
Showing 6 changed files with 387 additions and 261 deletions.
21 changes: 15 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,17 +34,26 @@
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"@ckeditor/ckeditor5-basic-styles": "^31.0.0",
"@ckeditor/ckeditor5-build-decoupled-document": "^31.0.0",
"@ckeditor/ckeditor5-core": "^31.0.0",
"@ckeditor/ckeditor5-autoformat": "^33.0.0",
"@ckeditor/ckeditor5-basic-styles": "^33.0.0",
"@ckeditor/ckeditor5-block-quote": "^33.0.0",
"@ckeditor/ckeditor5-dev-env": "^27.4.0",
"@ckeditor/ckeditor5-paragraph": "^31.0.0",
"@ckeditor/ckeditor5-ui": "^31.0.0",
"@ckeditor/ckeditor5-utils": "^31.0.0",
"@ckeditor/ckeditor5-editor-decoupled": "^33.0.0",
"@ckeditor/ckeditor5-essentials": "^33.0.0",
"@ckeditor/ckeditor5-heading": "^33.0.0",
"@ckeditor/ckeditor5-html-support": "^33.0.0",
"@ckeditor/ckeditor5-image": "^33.0.0",
"@ckeditor/ckeditor5-indent": "^33.0.0",
"@ckeditor/ckeditor5-link": "^33.0.0",
"@ckeditor/ckeditor5-list": "^33.0.0",
"@ckeditor/ckeditor5-media-embed": "^33.0.0",
"@ckeditor/ckeditor5-paste-from-office": "^33.0.0",
"@ckeditor/ckeditor5-table": "^33.0.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.3",
"chai": "^4.3.4",
"chai-enzyme": "^1.0.0-beta.1",
"ckeditor5": "^33.0.0",
"copy-to-clipboard": "^3.3.1",
"css-loader": "^2.1.1",
"cssnano": "^4.1.11",
Expand Down
104 changes: 99 additions & 5 deletions sample/inspector.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,30 @@
<head>
<meta charset="utf-8">
<title>Inspector sample</title>
<script src="../node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"></script>

<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-editor-decoupled/build/editor-decoupled.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-html-support/build/html-support.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<script src="../build/inspector.js"></script>
</head>
<body>
<h2>First editor</h2>
<div id="first-editor-content">
<h2>The three greatest things you learn from traveling</h2>
<p>Like <a href="https://ckeditor.com">all the <b>great things on earth</b> traveling teaches</a> us by example. Here are some <br>of the most precious lessons I’ve
<p class="foo bar" foo="true" style="color: green;">Like <a href="https://ckeditor.com">all the <b>great things on earth</b> traveling teaches</a> us by example. Here are some <br>of the most precious lessons I’ve
learned over the years of traveling.</p>
<figure class="table">
<table>
Expand Down Expand Up @@ -163,8 +179,84 @@ <h2>Actions</h2>
editorNames = [];
} );

DecoupledEditor
const config = {
plugins: [
CKEditor5.autoformat.Autoformat,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.blockQuote.BlockQuote,
CKEditor5.essentials.Essentials,
CKEditor5.heading.Heading,
CKEditor5.htmlSupport.GeneralHtmlSupport,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.mediaEmbed.MediaEmbed,
CKEditor5.paragraph.Paragraph,
CKEditor5.pasteFromOffice.PasteFromOffice,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar
],
htmlSupport: {
allow: [
{
name: 'p',
classes: [ 'foo', 'bar' ],
attributes: {
foo: 'true',
},
styles: { 'color': true }
}
],
},
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'uploadImage',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
};

CKEditor5.editorDecoupled.DecoupledEditor
.create( document.querySelector( '#first-editor-content' ), {
...config,
extraPlugins: [ UploadAdapter, MarkerDemoPlugin ]
} )
.then( editor => {
Expand All @@ -177,8 +269,9 @@ <h2>Actions</h2>
console.error( error );
} );

DecoupledEditor
CKEditor5.editorDecoupled.DecoupledEditor
.create( document.querySelector( '#second-editor-content' ), {
...config,
extraPlugins: [ UploadAdapter ]
} )
.then( editor => {
Expand All @@ -191,8 +284,9 @@ <h2>Actions</h2>
console.error( error );
} );

DecoupledEditor
CKEditor5.editorDecoupled.DecoupledEditor
.create( document.querySelector( '#rtl-editor-content' ), {
...config,
extraPlugins: [ UploadAdapter ],
language: 'ar'
} )
Expand Down
88 changes: 83 additions & 5 deletions sample/miniinspector.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,22 @@
<head>
<meta charset="utf-8">
<title>Mini inspector sample</title>
<script src="../node_modules/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"></script>

<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-editor-decoupled/build/editor-decoupled.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-paste-from-office/build/paste-from-office.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>

<script src="../build/miniinspector.js"></script>
</head>
<body>
Expand Down Expand Up @@ -101,10 +116,73 @@ <h2>The three greatest things you learn from traveling</h2>
} );
}

DecoupledEditor
.create( document.querySelector( '#editor-content' ), {
extraPlugins: [ UploadAdapter, MarkerDemoPlugin ]
} )
const config = {
plugins: [
CKEditor5.autoformat.Autoformat,
CKEditor5.basicStyles.Bold,
CKEditor5.basicStyles.Italic,
CKEditor5.blockQuote.BlockQuote,
CKEditor5.essentials.Essentials,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.mediaEmbed.MediaEmbed,
CKEditor5.paragraph.Paragraph,
CKEditor5.pasteFromOffice.PasteFromOffice,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,

UploadAdapter,
MarkerDemoPlugin
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'uploadImage',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'toggleImageCaption',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
};

CKEditor5.editorDecoupled.DecoupledEditor
.create( document.querySelector( '#editor-content' ), config )
.then( editor => {
window.firstEditor = editor;
document.body.insertBefore( editor.ui.view.toolbar.element, editor.ui.getEditableElement() );
Expand Down
4 changes: 3 additions & 1 deletion src/components/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ export function stringify( value, quotesAroundText = true ) {
}

const stringified = javascriptStringify( value, stringifySingleToDoubleQuotesReplacer, null, {
maxDepth: 1
// https://github.com/ckeditor/ckeditor5-inspector/issues/98
// https://github.com/ckeditor/ckeditor5-inspector/issues/129
maxDepth: 2
} );

// Note: Remove leading and trailing quotes (") from the output. By default it is:
Expand Down
9 changes: 6 additions & 3 deletions tests/inspector/components/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,18 @@ describe( 'Utils', () => {
} ).to.not.throw();
} );

it( 'should process only the very first level of objects', () => {
it( 'should process only two first level of objects', () => {
const obj = {
level: '1',
nested: {
level: '2'
level: '2',
subNested: {
level: '3'
}
}
};

expect( stringify( obj ) ).to.equal( '{level:"1",nested:{}}' );
expect( stringify( obj ) ).to.equal( '{level:"1",nested:{level:"2",subNested:{}}}' );
} );
} );

Expand Down
Loading

0 comments on commit 5874d2a

Please sign in to comment.