yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2026-01-07 12:45:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add syntax highlight in preview wysiwyg

Browse Source 
Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-07-15 19:30:55 +02:00
parent b3ec0c37e2
commit afae5b8964
11 changed files with 72 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
examples/getstarted/api/preview/config/routes.json
View File

@ -1,52 +0,0 @@
{
"routes": [
{
"method": "GET",
"path": "/previews",
"handler": "preview.find",
"config": {
"policies": []
}
},
{
"method": "GET",
"path": "/previews/count",
"handler": "preview.count",
"config": {
"policies": []
}
},
{
"method": "GET",
"path": "/previews/:id",
"handler": "preview.findOne",
"config": {
"policies": []
}
},
{
"method": "POST",
"path": "/previews",
"handler": "preview.create",
"config": {
"policies": []
}
},
{
"method": "PUT",
"path": "/previews/:id",
"handler": "preview.update",
"config": {
"policies": []
}
},
{
"method": "DELETE",
"path": "/previews/:id",
"handler": "preview.delete",
"config": {
"policies": []
}
}
]
}

8
examples/getstarted/api/preview/controllers/preview.js
View File

@ -1,8 +0,0 @@
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/controllers.html#core-controllers)
* to customize this controller
*/
module.exports = {};

8
examples/getstarted/api/preview/models/preview.js
View File

@ -1,8 +0,0 @@
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/models.html#lifecycle-hooks)
* to customize this model
*/
module.exports = {};

16
examples/getstarted/api/preview/models/preview.settings.json
View File

@ -1,16 +0,0 @@
{
"kind": "collectionType",
"collectionName": "previews",
"info": {
"name": "preview"
},
"options": {
"increments": true,
"timestamps": true
},
"attributes": {
"text": {
"type": "richtext"
}
}
}

8
examples/getstarted/api/preview/services/preview.js
View File

@ -1,8 +0,0 @@
'use strict';
/**
* Read the documentation (https://strapi.io/documentation/v3.x/concepts/services.html#core-services)
* to customize this service
*/
module.exports = {};

34
packages/strapi-plugin-content-manager/admin/src/components/PreviewWysiwyg/CodeBlock.js Normal file
View File

@ -0,0 +1,34 @@
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import hljs from 'highlight.js';
// Dark theme
// import 'highlight.js/styles/night-owl.css';
import 'highlight.js/styles/github.css';
const CodeBlock = ({ language, value }) => {
const ref = useRef();
useEffect(() => {
hljs.highlightBlock(ref.current);
}, [value]);
return (
<pre>
<code ref={ref} className={`language-${language || 'bash'}`}>
{value}
</code>
</pre>
);
};
CodeBlock.defaultProps = {
language: '',
value: '',
};
CodeBlock.propTypes = {
language: PropTypes.string,
value: PropTypes.string,
};
export default CodeBlock;

33
packages/strapi-plugin-content-manager/admin/src/components/PreviewWysiwyg/Wrapper.js
View File

@ -1,9 +1,9 @@
import styled, { css } from 'styled-components';
import styled from 'styled-components';
/* eslint-disable */
const Wrapper = styled.div`
max-height: calc(100% - 70px);
max-height: 555px;
min-height: 294px;
overflow: auto;
padding: 20px 20px 0 20px;
@ -84,33 +84,26 @@ const Wrapper = styled.div`
}
}
pre,
code {
background-color: rgba(0, 0, 0, 0.05);
font-size: 13px;
font-family: 'Lato';
border-radius: 3px;
color: #212529;
}
pre {
padding: 16px;
margin-top: 26px;
background-color: rgba(0, 0, 0, 0.05);
border-radius: 3px;
code {
background-color: transparent;
}
span {
font-family: Consolas, monospace !important;
font-size: 12px;
line-height: 16px;
white-space: pre;
/* Inline code */
p,
td {
> code {
/* We need to add the same color as the theme */
background-color: #f8f8f8;
color: #333;
}
}
${({ isFullscreen }) => {
if (isFullscreen) {
return css`
return `
max-height: calc(100% - 70px) !important;
margin-bottom: 0;
margin-top: 9px;

11
packages/strapi-plugin-content-manager/admin/src/components/PreviewWysiwyg/index.js
View File

@ -7,15 +7,22 @@
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown/with-html';
import useWysiwyg from '../../hooks/useWysiwyg';
import CodeBlock from './CodeBlock';
import Wrapper from './Wrapper';
const PreviewWysiwyg = ({ data }) => {
const { isFullscreen } = useWysiwyg;
const { isFullscreen } = useWysiwyg();
return (
<Wrapper isFullscreen={isFullscreen}>
<ReactMarkdown source={data} skipHtml={false} escapeHtml={false} />
<ReactMarkdown
source={data}
skipHtml={false}
escapeHtml={false}
renderers={{ code: CodeBlock }}
/>
</Wrapper>
);
};

10
packages/strapi-plugin-content-manager/admin/src/components/WysiwygWithErrors/Wrapper.js
View File

@ -23,6 +23,16 @@ const Wrapper = styled.div`
text-overflow: ellipsis;
margin-bottom: -9px;
}
div,
pre,
code {
::-webkit-scrollbar {
height: 5px;
width: 5px;
cursor: default;
}
}
`;
export default Wrapper;

1
packages/strapi-plugin-content-manager/package.json
View File

@ -13,6 +13,7 @@
"classnames": "^2.2.6",
"codemirror": "^5.46.0",
"draft-js": "^0.11.5",
"highlight.js": "^10.1.1",
"immutable": "^3.8.2",
"lodash": "^4.17.11",
"pluralize": "^7.0.0",

5
yarn.lock
View File

@ -9129,6 +9129,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
highlight.js@^10.1.1:
version "10.1.1"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.1.1.tgz#691a2148a8d922bf12e52a294566a0d993b94c57"
integrity sha512-b4L09127uVa+9vkMgPpdUQP78ickGbHEQTWeBrQFTJZ4/n2aihWOGS0ZoUqAwjVmfjhq/C76HRzkqwZhK4sBbg==
history@^4.9.0:
version "4.10.1"
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"