Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor: Explicit import of quill.js dependency doesn't allow for single pages with inline scripting #3097

Closed
melloware opened this issue Jul 23, 2022 · 0 comments · Fixed by #3098
Closed

Editor: Explicit import of quill.js dependency doesn't allow for single pages with inline scripting #3097

melloware opened this issue Jul 23, 2022 · 0 comments · Fixed by #3098
Assignees
@melloware
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone
8.4.0

Comments

@melloware
Copy link
Member

melloware commented Jul 23, 2022 •
edited
Loading

Describe the bug

Same as #3059

cc @tailg8nj

Reproducer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Chart Example</title>

    <!-- PrimeReact -->
    <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/primeflex.min.css" />

    <!-- Dependencies -->
    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/react-transition-group.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.js" crossorigin="anonymous"></script>

    <!-- Demo -->
    <script src="https://unpkg.com/primereact/core/core.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/primereact/editor/editor.min.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">

        const { useEffect, useState } = React;
        import { Editor } from 'primereact/editor';

const EditorDemo = () => {
    const [text1, setText1] = useState('<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>');
    const [text2, setText2] = useState('');

    const renderHeader = () => {
        return (
            <span className="ql-formats">
                <button className="ql-bold" aria-label="Bold"></button>
                <button className="ql-italic" aria-label="Italic"></button>
                <button className="ql-underline" aria-label="Underline"></button>
            </span>
        );
    }

    const header = renderHeader();

    return (
        <div>
            <div className="card">
                <h5>Default</h5>
                <Editor style={{ height: '320px' }} value={text1} onTextChange={(e) => setText1(e.htmlValue)} />

                <h5>Customized</h5>
                <Editor headerTemplate={header} style={{ height: '320px' }} value={text2} onTextChange={(e) => setText2(e.htmlValue)} />
            </div>
        </div>
    );
}

        const rootElement = document.getElementById("root");
        ReactDOM.render(<EditorDemo />, rootElement);

    </script>
</body>
</html>

PrimeReact version

8.0.0

React version

18.x

Language

ALL

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jul 23, 2022
@melloware melloware self-assigned this Jul 23, 2022
@melloware melloware added this to the 9.0.0 milestone Jul 23, 2022
melloware added a commit to melloware/primereact that referenced this issue Jul 23, 2022
@melloware
Fix primefaces#3097: Editor allow loading from script
dfb72bc
@melloware melloware mentioned this issue Jul 23, 2022
Merged
@mertsincan mertsincan modified the milestones: 9.0.0, 8.4.0 Aug 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@melloware melloware

Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Milestone
8.4.0
Development

Successfully merging a pull request may close this issue.

Fix #3097: Editor allow loading from script melloware/primereact
2 participants
@melloware @mertsincan