arnekeller/trilium-timeline
1
0
Fork 0
mirror of https://gitlab.com/arnekeller/trilium-timeline.git synced 2024-11-25 02:15:05 +00:00
Code Issues Projects Releases Wiki Activity

Updated for 0.48.x, nothing was broken but I put everything in an async function to remove a warning.

Browse Source 
Update !!!meta.json, Timeline Widget Import.zip, and 4 more files...
This commit is contained in:
Quentin Le Caignec 2021-10-25 21:13:19 +02:00
parent c8a3807a9f
commit 3f5a562c5d
6 changed files with 395 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
!!!meta.json
View File

@ -1,17 +1,17 @@
{ {
"formatVersion": 1, "formatVersion": 1,
"appVersion": "0.47.7", "appVersion": "0.48.3",
"files": [ "files": [
{ {
"isClone": false, "isClone": false,
"noteId": "2sZ7j1WAYIEc", "noteId": "lwGnQ5Iexrw6",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc" "lwGnQ5Iexrw6"
], ],
"title": "Timeline Widget", "title": "Timeline Widget",
"notePosition": 100, "notePosition": 90,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "render", "type": "render",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -22,13 +22,6 @@
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
}, },
{
"type": "relation",
"name": "renderNote",
"value": "Pj8YRsJi8dTy",
"isInheritable": false,
"position": 20
},
{ {
"type": "label", "type": "label",
"name": "iconClass", "name": "iconClass",
@ -175,21 +168,28 @@
"value": "first", "value": "first",
"isInheritable": false, "isInheritable": false,
"position": 230 "position": 230
},
{
"type": "relation",
"name": "renderNote",
"value": "4SydRjaa28kb",
"isInheritable": false,
"position": 20
} }
], ],
"dirFileName": "Timeline Widget", "dirFileName": "Timeline Widget",
"children": [ "children": [
{ {
"isClone": false, "isClone": false,
"noteId": "Pj8YRsJi8dTy", "noteId": "4SydRjaa28kb",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy" "4SydRjaa28kb"
], ],
"title": "render.html", "title": "render.html",
"notePosition": 5, "notePosition": 5,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": true,
"type": "code", "type": "code",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -206,16 +206,16 @@
"children": [ "children": [
{ {
"isClone": false, "isClone": false,
"noteId": "HPQBuorDTNkS", "noteId": "3JNjK3Mj9cbK",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS" "3JNjK3Mj9cbK"
], ],
"title": "script.js", "title": "script.js",
"notePosition": 153, "notePosition": 153,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "code", "type": "code",
"mime": "application/javascript;env=frontend", "mime": "application/javascript;env=frontend",
"attributes": [], "attributes": [],
@ -224,17 +224,17 @@
"children": [ "children": [
{ {
"isClone": false, "isClone": false,
"noteId": "9v0I9nV5BLwz", "noteId": "4xkHYDkkVx4Y",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS", "3JNjK3Mj9cbK",
"9v0I9nV5BLwz" "4xkHYDkkVx4Y"
], ],
"title": "moment.min.js", "title": "moment.min.js",
"notePosition": 123, "notePosition": 123,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "file", "type": "file",
"mime": "application/javascript", "mime": "application/javascript",
"attributes": [ "attributes": [
@ -250,17 +250,17 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "BLHMY7p9amHk", "noteId": "HuO9AqA6zKc7",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS", "3JNjK3Mj9cbK",
"BLHMY7p9amHk" "HuO9AqA6zKc7"
], ],
"title": "vis.min.js", "title": "vis.min.js",
"notePosition": 133, "notePosition": 133,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "file", "type": "file",
"mime": "application/javascript", "mime": "application/javascript",
"attributes": [ "attributes": [
@ -276,17 +276,17 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "gcPseIMlkPRS", "noteId": "EmzNytW4VGal",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS", "3JNjK3Mj9cbK",
"gcPseIMlkPRS" "EmzNytW4VGal"
], ],
"title": "vis-timeline-graph2d.min.js", "title": "vis-timeline-graph2d.min.js",
"notePosition": 143, "notePosition": 143,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "file", "type": "file",
"mime": "application/javascript", "mime": "application/javascript",
"attributes": [ "attributes": [
@ -302,17 +302,17 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "m78T7NY9ObE1", "noteId": "TllSZh8VukbM",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS", "3JNjK3Mj9cbK",
"m78T7NY9ObE1" "TllSZh8VukbM"
], ],
"title": "vis.min.css", "title": "vis.min.css",
"notePosition": 153, "notePosition": 153,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "file", "type": "file",
"mime": "text/css", "mime": "text/css",
"attributes": [ "attributes": [
@ -335,17 +335,17 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "JhvzMCV72opp", "noteId": "0roaKuiSkbtN",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"Pj8YRsJi8dTy", "4SydRjaa28kb",
"HPQBuorDTNkS", "3JNjK3Mj9cbK",
"JhvzMCV72opp" "0roaKuiSkbtN"
], ],
"title": "vis-timeline-graph2d.min.css", "title": "vis-timeline-graph2d.min.css",
"notePosition": 163, "notePosition": 163,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "file", "type": "file",
"mime": "text/css", "mime": "text/css",
"attributes": [ "attributes": [
@ -372,28 +372,28 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "d7gJEGqNGL9p", "noteId": "DO4mSxFMbfXb",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"d7gJEGqNGL9p" "DO4mSxFMbfXb"
], ],
"title": "button.js", "title": "button.js",
"notePosition": 15, "notePosition": 15,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "code", "type": "code",
"mime": "application/javascript;env=frontend", "mime": "application/javascript;env=frontend",
"attributes": [ "attributes": [
{ {
"type": "relation", "type": "relation",
"name": "targetNote", "name": "targetNote",
"value": "2sZ7j1WAYIEc", "value": "lwGnQ5Iexrw6",
"isInheritable": false, "isInheritable": false,
"position": 10 "position": 10
}, },
{ {
"type": "label", "type": "label",
"name": "run", "name": "disabled:run",
"value": "frontendStartup", "value": "frontendStartup",
"isInheritable": false, "isInheritable": false,
"position": 20 "position": 20
@ -410,15 +410,15 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "JlnkqhfQ8JR4", "noteId": "QjfHRpX49lxd",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4" "QjfHRpX49lxd"
], ],
"title": "EXAMPLES", "title": "EXAMPLES",
"notePosition": 25, "notePosition": 25,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [], "attributes": [],
@ -427,16 +427,16 @@
"children": [ "children": [
{ {
"isClone": false, "isClone": false,
"noteId": "cDZAPX7ORCRa", "noteId": "irJeEjjPt7T4",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"cDZAPX7ORCRa" "irJeEjjPt7T4"
], ],
"title": "This event is in First", "title": "This event is in First",
"notePosition": 0, "notePosition": 0,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -460,16 +460,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "skEcjQY0NgNy", "noteId": "c1PdUC1Ak7Nh",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"skEcjQY0NgNy" "c1PdUC1Ak7Nh"
], ],
"title": "This event is in Second and this group is not visible by default", "title": "This event is in Second and this group is not visible by default",
"notePosition": 1, "notePosition": 1,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -493,16 +493,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "f5jq5D5cb4NX", "noteId": "HAaciZ3iN25V",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"f5jq5D5cb4NX" "HAaciZ3iN25V"
], ],
"title": "This event is in Third and has an end date", "title": "This event is in Third and has an end date",
"notePosition": 2, "notePosition": 2,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -533,16 +533,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "bxl4R5CTPvvn", "noteId": "WQdcXc7QtPz3",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"bxl4R5CTPvvn" "WQdcXc7QtPz3"
], ],
"title": "This event is in a seperate group then inserted into \"Third\"", "title": "This event is in a seperate group then inserted into \"Third\"",
"notePosition": 3, "notePosition": 3,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -566,16 +566,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "JTjoGTswR2GA", "noteId": "tYrgBTjurENE",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"JTjoGTswR2GA" "tYrgBTjurENE"
], ],
"title": "This event is in Third", "title": "This event is in Third",
"notePosition": 3, "notePosition": 3,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -599,16 +599,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "K7Fjghj31lUs", "noteId": "C0VeJ0npwoEC",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"K7Fjghj31lUs" "C0VeJ0npwoEC"
], ],
"title": "This is a background event then inserted into \"Second\"", "title": "This is a background event then inserted into \"Second\"",
"notePosition": 4, "notePosition": 4,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [
@ -639,16 +639,16 @@
}, },
{ {
"isClone": false, "isClone": false,
"noteId": "aVUiO3d3lfmo", "noteId": "5KePb9QfyuQq",
"notePath": [ "notePath": [
"2sZ7j1WAYIEc", "lwGnQ5Iexrw6",
"JlnkqhfQ8JR4", "QjfHRpX49lxd",
"aVUiO3d3lfmo" "5KePb9QfyuQq"
], ],
"title": "This is a person note generating birth/death events", "title": "This is a person note generating birth/death events",
"notePosition": 14, "notePosition": 14,
"prefix": null, "prefix": null,
"isExpanded": 0, "isExpanded": false,
"type": "text", "type": "text",
"mime": "text/html", "mime": "text/html",
"attributes": [ "attributes": [

BIN
Timeline Widget Import.zip
View File

Binary file not shown.

98
Timeline Widget/1_render.html/script.js
View File

@ -1,13 +1,15 @@
/** Version 1.0 **/ /** Version 1.0 **/
renderTimeline();
// Initialize libraries and context async function renderTimeline() {
var vis = require('vis.min.js'); // Initialize libraries and context
var moment = require('moment.min.js'); var vis = require('vis.min.js');
var container = document.getElementById("timeline"); //var moment = require('moment.min.js');
var menu = document.getElementById("menu"); var container = document.getElementById("timeline");
var menu = document.getElementById("menu");
// Get widget attribute values and fetch notes from defined tags // Get widget attribute values and fetch notes from defined tags
const events = await api.runOnServer(() => { const events = await api.runOnServer(() => {
const parentNote = api.startNote.getParentNotes()[0]; const parentNote = api.startNote.getParentNotes()[0];
// fetch what labels to look for from widget attributes // fetch what labels to look for from widget attributes
// event notes (start/end) // event notes (start/end)
@ -58,10 +60,10 @@ const events = await api.runOnServer(() => {
} }
} }
return events; return events;
}); });
// Get event types, make groups // Get event types, make groups
const types = await api.runOnServer(() => { const types = await api.runOnServer(() => {
const parentNote = api.startNote.getParentNotes()[0]; const parentNote = api.startNote.getParentNotes()[0];
const event_type_list = parentNote.getLabelValue('event_type_list').toString().split(';'); const event_type_list = parentNote.getLabelValue('event_type_list').toString().split(';');
const types = []; const types = [];
@ -76,29 +78,29 @@ const types = await api.runOnServer(() => {
color: type.split(',')[3] ? (type.split(',')[3].toString()) : null, color: type.split(',')[3] ? (type.split(',')[3].toString()) : null,
visible: type.split(',')[4] ? (type.split(',')[4] === 'true') : true, visible: type.split(',')[4] ? (type.split(',')[4] === 'true') : true,
type: type.split(',')[5] ? type.split(',')[5].toString() : null, type: type.split(',')[5] ? type.split(',')[5].toString() : null,
forceGroup: type.split(',')[6] ? (type.split(',')[6].toString()) : null, forceGroup: type.split(',')[6] ? (type.split(',')[6].toString()) : null
}); });
i++; i++;
} }
return types return types
}); });
// merge the default group with attribute-added groups // merge the default group with attribute-added groups
var groups = new vis.DataSet([ var groups = new vis.DataSet([
{id:'default', order: 100, content:'', color:'white', visible:true, type:null, forceGroup:null}, {id:'default', order: 100, content:'', color:'white', visible:true, type:null, forceGroup:null},
...types, ...types
]); ]);
// Create a DataSet for all event items // Create a DataSet for all event items
var items = new vis.DataSet(); var items = new vis.DataSet();
for (var i = 0; i < events.length; i++) { for (var i = 0; i < events.length; i++) {
// get date values and note link // get date values and note link
var note_id = events[i].id; var note_id = events[i].id;
var note_link = await api.createNoteLink(note_id); var note_link = await api.createNoteLink(note_id);
var event_content = events[i].content; var event_content = events[i].content;
note_link[0].firstChild.innerText = event_content; note_link[0].firstChild.innerText = event_content;
var event_start = vis.moment(events[i].start); var event_start = vis.moment(events[i].start, 'YYYY-MM-DD-hh:mm:ss');
var event_end = events[i].end ? vis.moment(events[i].end) : null; var event_end = events[i].end ? vis.moment(events[i].end, 'YYYY-MM-DD-hh:mm:ss') : null;
// set event group // set event group
var event_group = events[i].group var event_group = events[i].group
? (groups.get({filter: function (item) { return (item.id === events[i].group) }})[0] ? (groups.get({filter: function (item) { return (item.id === events[i].group) }})[0]
@ -114,61 +116,61 @@ for (var i = 0; i < events.length; i++) {
group: event_group.forceGroup ? event_group.forceGroup : event_group.id, group: event_group.forceGroup ? event_group.forceGroup : event_group.id,
type: (event_group.type=='box' || event_group.type=='point' || event_group.type=='range' || event_group.type=='background') ? event_group.type : null, type: (event_group.type=='box' || event_group.type=='point' || event_group.type=='range' || event_group.type=='background') ? event_group.type : null,
className: event_group.id, className: event_group.id,
style: `background-color:${event_group.color};border-color:${event_group.color};`, style: `background-color:${event_group.color};border-color:${event_group.color};`
}); });
} }
console.log(items);
// Timeline options // Timeline options
const timeline_options = await api.runOnServer(() => { const timeline_options = await api.runOnServer(() => {
const parentNote = api.startNote.getParentNotes()[0]; const parentNote = api.startNote.getParentNotes()[0];
const timeline_start = parentNote.getLabelValue('timeline_start'); const timeline_start = parentNote.getLabelValue('timeline_start');
const timeline_end = parentNote.getLabelValue('timeline_end'); const timeline_end = parentNote.getLabelValue('timeline_end');
const timeline_present = parentNote.getLabelValue('timeline_present'); const timeline_present = parentNote.getLabelValue('timeline_present');
return {timeline_start, timeline_end, timeline_present}; return {timeline_start, timeline_end, timeline_present};
}); });
var options = { var options = {
clickToUse: false, clickToUse: false,
showCurrentTime: true, showCurrentTime: true,
height: '95%', height: '95%',
start: timeline_options.timeline_start, start: timeline_options.timeline_start,
end: timeline_options.timeline_end, end: timeline_options.timeline_end
}; };
// Set timeline wrapper height // Set timeline wrapper height
container.parentNode.style.height = '100%'; container.parentNode.style.height = '100%';
// Fix timeline display // Fix timeline display
container.parentNode.parentNode.parentNode.parentNode.style.display = 'initial'; container.parentNode.parentNode.parentNode.parentNode.style.display = 'initial';
// Create Timeline // Create Timeline
var timeline = new vis.Timeline(container, items, groups, options); var timeline = new vis.Timeline(container, items, groups, options);
// Add present time marker based on "timeline_present" label // Add present time marker based on "timeline_present" label
timeline.setCurrentTime(timeline_options.timeline_present); timeline.setCurrentTime(timeline_options.timeline_present);
// Create UI menu buttons from added groups (that are not forced into another group) // Create UI menu buttons from added groups (that are not forced into another group)
menu.innerHTML = ''; menu.innerHTML = '';
const toggle_groups = groups.get({filter:function(item){return(item.forceGroup===null && item.id!=='default')}}); const toggle_groups = groups.get({filter:function(item){return(item.forceGroup===null && item.id!=='default')}});
for (const group of toggle_groups) { for (const group of toggle_groups) {
var button = document.createElement('input'); var button = document.createElement('input');
button.type = 'button'; button.type = 'button';
button.id = `toggle-${group.id}`; button.id = `toggle-${group.id}`;
button.value = group.content; button.value = group.content;
button.className = (group.visible===true) ? 'toggled' : ''; button.className = (group.visible===true) ? 'toggled' : '';
menu.appendChild(button); menu.appendChild(button);
} }
// Bind toggle buttons // Bind toggle buttons
for (const group of toggle_groups) { for (const group of toggle_groups) {
document.getElementById(`toggle-${group.id}`).onclick = function(){ document.getElementById(`toggle-${group.id}`).onclick = function(){
toggleGroupVisibility(group.id); toggleGroupVisibility(group.id);
} }
} }
// Function to toggle group visibility // Function to toggle group visibility
function toggleGroupVisibility(group_id){ function toggleGroupVisibility(group_id){
var visibility = groups.get({filter:function(item){return(item.id==group_id)}})[0].visible; var visibility = groups.get({filter:function(item){return(item.id==group_id)}})[0].visible;
groups.update({id: group_id, visible: !visibility}); groups.update({id: group_id, visible: !visibility});
console.log(document.getElementById(`toggle-${group_id}`)); console.log(document.getElementById(`toggle-${group_id}`));
document.getElementById(`toggle-${group_id}`).className = (!visibility===true) ? 'toggled' : ''; document.getElementById(`toggle-${group_id}`).className = (!visibility===true) ? 'toggled' : '';
timeline.setGroups(groups); timeline.setGroups(groups);
timeline.redraw(); timeline.redraw();
}
} }

2
Timeline Widget/EXAMPLES/This event is in a seperate gr.html
View File

@ -10,6 +10,8 @@
<body class="ck-content"> <body class="ck-content">
<h1>This event is in a seperate group then inserted into &quot;Third&quot;</h1> <h1>This event is in a seperate group then inserted into &quot;Third&quot;</h1>
<h2>This event is in a seperate group then inserted into "Third"</h2>
<p>This event has the “event_start” label attribute which is defined in the <p>This event has the “event_start” label attribute which is defined in the
widget as the tag marking events to be fetched.</p> widget as the tag marking events to be fetched.</p>
<p>This event has the “event_type” label of value “forcedInto”, sorting it <p>This event has the “event_type” label of value “forcedInto”, sorting it

2
Timeline Widget/EXAMPLES/This is a background event the.html
View File

@ -10,6 +10,8 @@
<body class="ck-content"> <body class="ck-content">
<h1>This is a background event then inserted into &quot;Second&quot;</h1> <h1>This is a background event then inserted into &quot;Second&quot;</h1>
<h2>This is a background event then inserted into "Second"</h2>
<p>This event has the “event_start” label attribute which is defined in the <p>This event has the “event_start” label attribute which is defined in the
widget as the tag marking events to be fetched.</p> widget as the tag marking events to be fetched.</p>
<p>This event has the “event_end” label attribute which, combined with “event_start”, <p>This event has the “event_end” label attribute which, combined with “event_start”,

195
style.css
View File

@ -4,15 +4,13 @@
display: none; display: none;
} }
/*
* CKEditor 5 (v27.1.0) content styles.
* Generated on Wed, 21 Apr 2021 07:00:21 GMT.
* For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
*/
:root { :root {
--ck-color-image-caption-background: hsl(0, 0%, 97%);
--ck-color-image-caption-text: hsl(0, 0%, 20%);
--ck-color-mention-background: hsla(341, 100%, 30%, 0.1); --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
--ck-color-mention-text: hsl(341, 100%, 30%); --ck-color-mention-text: hsl(341, 100%, 30%);
--ck-color-table-caption-background: hsl(0, 0%, 97%);
--ck-color-table-caption-text: hsl(0, 0%, 20%);
--ck-highlight-marker-blue: hsl(201, 97%, 72%); --ck-highlight-marker-blue: hsl(201, 97%, 72%);
--ck-highlight-marker-green: hsl(120, 93%, 68%); --ck-highlight-marker-green: hsl(120, 93%, 68%);
--ck-highlight-marker-pink: hsl(345, 96%, 73%); --ck-highlight-marker-pink: hsl(345, 96%, 73%);
@ -20,6 +18,7 @@
--ck-highlight-pen-green: hsl(112, 100%, 27%); --ck-highlight-pen-green: hsl(112, 100%, 27%);
--ck-highlight-pen-red: hsl(0, 85%, 49%); --ck-highlight-pen-red: hsl(0, 85%, 49%);
--ck-image-style-spacing: 1.5em; --ck-image-style-spacing: 1.5em;
--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
--ck-todo-list-checkmark-size: 16px; --ck-todo-list-checkmark-size: 16px;
} }
@ -66,6 +65,16 @@
font-size: 1.8em; font-size: 1.8em;
} }
/* ckeditor5-image/theme/imagestyle.css */ /* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
max-width: calc(100% - var(--ck-image-style-spacing));
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
clear: none;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side { .ck-content .image-style-side {
float: right; float: right;
margin-left: var(--ck-image-style-spacing); margin-left: var(--ck-image-style-spacing);
@ -86,6 +95,98 @@
float: right; float: right;
margin-left: var(--ck-image-style-spacing); margin-left: var(--ck-image-style-spacing);
} }
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
margin-right: 0;
margin-left: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
margin-left: 0;
margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
margin-top: 0;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
margin-top: var(--ck-inline-image-style-spacing);
margin-bottom: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
margin-right: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
margin-left: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
display: table-caption;
caption-side: bottom;
word-break: break-word;
color: var(--ck-color-image-caption-text);
background-color: var(--ck-color-image-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
display: table;
clear: both;
text-align: center;
margin: 0.9em auto;
min-width: 50px;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-width: 100%;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline {
/*
* Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
* Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
* This strange behavior does not happen with inline-flex.
*/
display: inline-flex;
max-width: 100%;
align-items: flex-start;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
display: flex;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
flex-grow: 1;
flex-shrink: 1;
max-width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
max-width: 100%;
display: block;
box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
display: block;
}
/* ckeditor5-code-block/theme/codeblock.css */ /* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre { .ck-content pre {
padding: 1em; padding: 1em;
@ -106,12 +207,6 @@
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
} }
/* ckeditor5-html-embed/theme/htmlembed.css */
.ck-content .raw-html-embed {
margin: 1em auto;
min-width: 15em;
font-style: normal;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */ /* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr { .ck-content hr {
margin: 15px 0; margin: 15px 0;
@ -119,55 +214,6 @@
background: hsl(0, 0%, 87%); background: hsl(0, 0%, 87%);
border: 0; border: 0;
} }
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
display: table-caption;
caption-side: bottom;
word-break: break-word;
color: hsl(0, 0%, 20%);
background-color: hsl(0, 0%, 97%);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
max-width: 100%;
display: block;
box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
display: block;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
display: table;
clear: both;
text-align: center;
margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
display: block;
margin: 0 auto;
max-width: 100%;
min-width: 50px;
}
/* ckeditor5-language/theme/language.css */
.ck-content span[lang] {
font-style: italic;
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
background-color: hsla(0, 0%, 78%, 0.3);
padding: .15em;
border-radius: 2px;
}
/* ckeditor5-block-quote/theme/blockquote.css */ /* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote { .ck-content blockquote {
overflow: hidden; overflow: hidden;
@ -183,9 +229,15 @@
border-left: 0; border-left: 0;
border-right: solid 5px hsl(0, 0%, 80%); border-right: solid 5px hsl(0, 0%, 80%);
} }
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
background-color: hsla(0, 0%, 78%, 0.3);
padding: .15em;
border-radius: 2px;
}
/* ckeditor5-table/theme/table.css */ /* ckeditor5-table/theme/table.css */
.ck-content .table { .ck-content .table {
margin: 1em auto; margin: 0.9em auto;
display: table; display: table;
} }
/* ckeditor5-table/theme/table.css */ /* ckeditor5-table/theme/table.css */
@ -216,6 +268,18 @@
.ck-content[dir="ltr"] .table th { .ck-content[dir="ltr"] .table th {
text-align: left; text-align: left;
} }
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
display: table-caption;
caption-side: top;
word-break: break-word;
text-align: center;
color: var(--ck-color-table-caption-text);
background-color: var(--ck-color-table-caption-background);
padding: .6em;
font-size: .75em;
outline-offset: -1px;
}
/* ckeditor5-page-break/theme/pagebreak.css */ /* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break { .ck-content .page-break {
position: relative; position: relative;
@ -255,7 +319,7 @@
/* ckeditor5-media-embed/theme/mediaembed.css */ /* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media { .ck-content .media {
clear: both; clear: both;
margin: 1em 0; margin: 0.9em 0;
display: block; display: block;
min-width: 15em; min-width: 15em;
} }
@ -326,6 +390,10 @@
.ck-content .todo-list .todo-list__label .todo-list__label__description { .ck-content .todo-list .todo-list__label .todo-list__label__description {
vertical-align: middle; vertical-align: middle;
} }
/* ckeditor5-language/theme/language.css */
.ck-content span[lang] {
font-style: italic;
}
/* ckeditor5-mention/theme/mention.css */ /* ckeditor5-mention/theme/mention.css */
.ck-content .mention { .ck-content .mention {
background: var(--ck-color-mention-background); background: var(--ck-color-mention-background);
@ -341,3 +409,4 @@
display: none; display: none;
} }
} }