created: 2024-11-19 06:02 tags: - daily-notes

Tuesday, November 19, 2024

<< Timestamps/2024/11-November/2024-11-18-Monday|Yesterday | Timestamps/2024/11-November/2024-11-20-Wednesday|Tomorrow >>

🎯 Goal

• [x] Configure the CKeditor 5 layout for my blog posts

🌟 Results

• Configured the CKeditor 5 layout for my blog posts
• Added custom CSS to CKeditor
  • Fixed the text color issue
• Designated custom editors for different purposes
• Created custom file upload logic for uploading files to S3

🌱 Next Time

• Fix the HTML embedding error when trying to embed HTML into the editor.
• Close out the ckeditor update issue.

📝 Notes

Still have the error of being unable to see my text:

--redacted--

Gonna have to figure out where this styling is coming from. Found the location of the text color. Looks like it's in the body tag of the CSS file called admin/css/base.css. Specifically, the color component of the body was what needed to be changed:

--redacted--

This is neatly stored via the --body-fg variable which is set at the top of the file:

--redacted--

When I collect the Static Files I can find that these CSS files are in my static/admin/css path. Looks like this is specifically a problem in dark mode (static/admin/css/dark_mode.css), which is trying to set a font color to contrast the editor headers with the background color.

--redacted--

It looks like my custom Static Files aren't loading here: --redacted--

which is why I can't change the color of the body text. I was able to finally figure it out. I added the custom CSS file location via the config/settings.py file:

CKEDITOR_5_CUSTOM_CSS = '/static/css/ckeditor_custom.css'

Which overrides the body element to have black text:

--redacted--

I now have the static_common/css/ckeditor_custom.css I can use to personalize my editors. I'm going to customize a CKeditor layout specifically for writing my blogs (called "blog").

I overrode the settings for the .ck-editor-container and .ck-editor__editable to allow scrolling (to keep the header fixed at the top of the editor) in my static_common/css/ckeditor_custom.css as follows:

.ck-editor-container {
    height: auto !important; /* Ensure it doesn't have a fixed height */
}
.ck-editor__editable {
    max-height: 600px !important; /* Add a scrollable height */
    overflow-y: auto !important; /* Enable scrolling */
}

This is much nicer than before and I can fix the max-height to be longer or shorter depending on how I end up editing it.

--redacted--

Next I need to order / separate file uploads from CKeditor. My previous CKeditor 4 file upload config was

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_RESTRICT_BY_DATE = True # Arranges image in terms of date uploaded

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono',
        'toolbar': None,
        'extraPlugins': 'codesnippet',
        'width': 'auto'
    },
}

I was able to add a custom function for saving uploaded files to a specific bucket in S3 via the following config/utils.py class:

import uuid
from datetime import datetime
from storages.backends.s3boto3 import S3Boto3Storage

class CustomS3Storage(S3Boto3Storage):
    def _save(self, name, content):
        # Get the current date
        today = datetime.now()
        # Organize files into folders by year and month
        date_path = today.strftime('%Y/%m')
        # Generate a unique filename
        unique_name = f'{uuid.uuid4()}_{name}'
        # Combine the date_path with the file name
        name = f'uploads/{date_path}/{unique_name}'
        return super()._save(name, content)

whose logic is explicitly called in the config/settings.py as:

CKEDITOR_5_FILE_STORAGE = "config.utils.CustomS3Storage" # optional

This appropriately routed my uploaded files to S3 by the month they were uploaded. However, storage for the blog configuration may make more sense if we associate each blog post with its own specific media. Specifically, instead of being able to see blog post images by the time they were uploaded, I'd like to see all media associated with a given post (i.e uploads/blog/14/image.png). It looks like this involved overriding the entire flow of image uploads (passing in context of CKEDITOR configs and intercepting info about blog post ids) but I'll make an issue for it and save it for later.

One final thing I need to configure will be that the source editor (called sourceEditing in the toolbar of the CKEDITOR_5_CONFIGS) that allows me to add custom HTML doesn't seem to be working. Firstly it's a pain to work in:

--redacted--

But second, it doesn't allow me any custom div tags which will be a problem when trying to add custom charts / interactive features. I tried adding htmlSupport to the CKEDITOR_5_CONFIGS but that didn't seem to work. A better option might be to use the htmlEmbed toolbar option, which allows the user to explicitly set aside portions for raw HTML to be integrated into the field:

--redacted--

The main issue is that this seems to return to "Empty snippet content" upon saving.

--redacted--

I'll have to fix this tomorrow, but overall this was good progress with the editor. Once I get this fixed I'll be confident that I can push these changes to prod.

More info about the HTML sanitization is available here.

Notes created today

List FROM "" WHERE file.cday = date("2024-11-19") SORT file.ctime asc

Notes last touched today

List FROM "" WHERE file.mday = date("2024-11-19") SORT file.mtime asc

(Template referenced from Dann Berg, can be found here)